ローディング系

Buckssauce Landing Page Reveal React

円形clip-pathの多層カラーリビールからフード画像を放射状に散らし、ズーム退場でSplitTextヒーローへ繋ぐランディング導入をReactへ移植しました。

Yutaka Kizaki

@junkbranding

2026年7月10日

読了時間: 8分

構成 / File Structure

</>Code Viewer

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

// data: SVGで自己完結させるフード画像（ローカル画像に依存しない）
const toDataImage = markup =>
  `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(markup)}`

const BURGER = toDataImage(`
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'>
    <rect x='40' y='120' width='120' height='30' rx='15' fill='#e2a04a'/>
    <rect x='36' y='104' width='128' height='20' rx='8' fill='#7a4a2b'/>
    <path d='M34 104 q66 18 132 0 q-4 12 -14 12 H48 q-10 0 -14 -12z' fill='#e23b2e'/>
    <path d='M32 92 q68 20 136 0 q-6 14 -18 14 H50 q-12 0 -18 -14z' fill='#6cbf3f'/>
    <path d='M40 92 q60 -60 120 0z' fill='#f2c078'/>
    <circle cx='84' cy='60' r='3.5' fill='#fff'/>
    <circle cx='112' cy='52' r='3.5' fill='#fff'/>
    <circle cx='132' cy='66' r='3.5' fill='#fff'/>
  </svg>
`)

const FRIES = toDataImage(`
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'>
    <g fill='#f2b705'>
      <rect x='70' y='40' width='12' height='90' rx='4'/>
      <rect x='88' y='30' width='12' height='100' rx='4'/>
      <rect x='106' y='38' width='12' height='92' rx='4'/>
      <rect x='124' y='48' width='12' height='82' rx='4'/>
    </g>
    <path d='M56 110 h88 l-10 60 a6 6 0 0 1 -6 5 H72 a6 6 0 0 1 -6 -5z' fill='#e01b22'/>
    <rect x='52' y='104' width='96' height='16' rx='6' fill='#f75828'/>
  </svg>
`)

const SHAKE = toDataImage(`
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'>
    <path d='M66 88 h68 l-8 78 a8 8 0 0 1 -8 7 H82 a8 8 0 0 1 -8 -7z' fill='#c49241'/>
    <rect x='60' y='78' width='80' height='16' rx='8' fill='#a9762f'/>
    <ellipse cx='100' cy='66' rx='32' ry='16' fill='#f7efe4'/>
    <path d='M74 78 q26 -30 52 0z' fill='#f7efe4'/>
    <rect x='118' y='28' width='9' height='46' rx='4' fill='#7a4a2b' transform='rotate(18 122 51)'/>
  </svg>
`)

const TACO = toDataImage(`
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'>
    <path d='M30 140 a70 70 0 0 1 140 0z' fill='#f2b705'/>
    <path d='M44 138 a56 56 0 0 1 112 0z' fill='#6cbf3f'/>
    <path d='M56 138 a44 44 0 0 1 88 0z' fill='#e23b2e'/>
    <path d='M70 138 a30 30 0 0 1 60 0z' fill='#7a4a2b'/>
    <path d='M30 140 h140 a70 70 0 0 0 -140 0z' fill='#f2c85a'/>
    <rect x='30' y='138' width='140' height='10' rx='5' fill='#d98f34'/>
  </svg>
`)

const PIZZA = toDataImage(`
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'>
    <circle cx='100' cy='100' r='84' fill='#e0a04a'/>
    <circle cx='100' cy='100' r='70' fill='#f5d9a0'/>
    <g fill='#d1382c'>
      <circle cx='78' cy='70' r='11'/>
      <circle cx='128' cy='84' r='11'/>
      <circle cx='96' cy='116' r='11'/>
      <circle cx='72' cy='128' r='9'/>
      <circle cx='138' cy='128' r='9'/>
    </g>
    <g fill='#6cbf3f'>
      <circle cx='110' cy='60' r='4'/>
      <circle cx='60' cy='96' r='4'/>
      <circle cx='120' cy='128' r='4'/>
    </g>
  </svg>
`)

const LOGO = toDataImage(`
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'>
    <circle cx='100' cy='100' r='92' fill='#f5e1bf'/>
    <circle cx='100' cy='100' r='78' fill='none' stroke='#fff' stroke-width='8'/>
    <ellipse cx='74' cy='74' rx='16' ry='22' fill='#fff'/>
    <rect x='70' y='92' width='8' height='58' rx='4' fill='#fff'/>
    <g fill='#fff'>
      <rect x='114' y='50' width='5' height='34' rx='2'/>
      <rect x='123' y='50' width='5' height='34' rx='2'/>
      <rect x='132' y='50' width='5' height='34' rx='2'/>
      <path d='M112 82 h28 v4 q0 8 -8 10 l2 54 h-16 l2 -54 q-8 -2 -8 -10z'/>
    </g>
  </svg>
`)

const PRELOADER_ITEMS = [BURGER, FRIES, SHAKE, TACO]

const NAV_LINKS = ['Menu', 'Locations', 'Our Story', 'Reserve', 'FAQ', 'Order']

// animation: プリローダーからヒーローまでを1本のtimelineで制御する
function Demo() {
  const rootRef = React.useRef(null)

React.useEffect(() => {
    gsap.registerPlugin(SplitText)

const root = rootRef.current
    if (!root) return

let context
    let cancelled = false
    const splits = []

document.fonts.ready.then(() => {
      if (cancelled || !rootRef.current) return

context = gsap.context(() => {
        // 分割: DOM文字列をSplitTextでアニメ可能な単位へ割る
        const navLinks = SplitText.create('.nav-items a', {
          type: 'words',
          mask: 'words',
          wordsClass: 'nav-word',
        })

const heading = SplitText.create('.hero-header h1', {
          type: 'lines, words, chars',
          charsClass: 'char',
          wordsClass: 'word',
        })

const footerText = SplitText.create('.hero-footer p', {
          type: 'lines',
          mask: 'lines',
          linesClass: 'footer-line',
        })

splits.push(navLinks, heading, footerText)

// 初期状態: ヒーロー側の要素を隠しておく
        gsap.set('.nav-logo img', { scale: 0 })
        gsap.set(navLinks.words, { yPercent: 100 })
        gsap.set(heading.chars, { y: 50, opacity: 0, scale: 0.5 })
        gsap.set(footerText.lines, { yPercent: 100 })

// data: 各アイテムの散開先と、ズーム退場先を定義する
        const itemTargets = [
          { x: '-20vw', y: '-30vh', rotation: -20 },
          { x: '25vw', y: '-20vh', rotation: 15 },
          { x: '-32vw', y: '30vh', rotation: 12 },
          { x: '15vw', y: '25vh', rotation: -15 },
        ]

const EXIT_DISTANCE = 3.5
        const itemExits = itemTargets.map(target => ({
          x: parseFloat(target.x) * EXIT_DISTANCE + 'vw',
          y: parseFloat(target.y) * EXIT_DISTANCE + 'vh',
          rotation: target.rotation * 2.5,
        }))

const items = gsap.utils.toArray('.item')
        const floatingTweens = []

const tl = gsap.timeline({ delay: 0.5 })

// 1) 円形clip-pathを多層で開き、カラーが順に切り替わる
        tl.to('.preloader-revealer', {
          clipPath: 'circle(100% at 50% 50%)',
          duration: 1,
          stagger: 0.25,
          ease: 'power2.inOut',
        })

tl.set('.preloader-revealer', { display: 'none' })

// 2) フードアイテムを中央から放射状に散らし、ふわふわ浮遊させる
        items.forEach((item, i) => {
          const target = itemTargets[i]
          const image = item.querySelector('img')

tl.to(
            item,
            {
              x: target.x,
              y: target.y,
              scale: 1,
              rotation: target.rotation,
              duration: 1,
              ease: 'power3.out',
              onStart: () => {
                floatingTweens[i] = gsap.to(image, {
                  y: gsap.utils.random(-15, -25),
                  duration: gsap.utils.random(1.5, 2.5),
                  ease: 'sine.inOut',
                  yoyo: true,
                  repeat: -1,
                  delay: gsap.utils.random(0, 0.5),
                })
              },
            },
            i === 0 ? '-=0.55' : '<0.075'
          )
        })

tl.to(
          '.preloader-logo',
          { scale: 1, opacity: 1, duration: 1, ease: 'power3.out' },
          '<'
        )

tl.set('.preloader-bg', { display: 'none' })
        tl.to({}, { duration: 1 })
        tl.add(() => floatingTweens.forEach(tween => tween && tween.kill()))

// 3) アイテムを外側へズーム退場させ、ロゴを上へ抜く
        items.forEach((item, i) => {
          const exit = itemExits[i]

tl.to(
            item,
            {
              x: exit.x,
              y: exit.y,
              scale: 2.5,
              rotation: exit.rotation,
              duration: 0.75,
              ease: 'power2.in',
            },
            i === 0 ? '>' : '<0.075'
          )
        })

tl.to(
          '.preloader-logo',
          { y: '-120vh', scale: 2.5, duration: 0.75, ease: 'power2.in' },
          '<'
        )

// 4) ヒーローのナビ・見出し・フッター・メインビジュアルを開放する
        tl.to(
          '.nav-logo img',
          { scale: 1, duration: 0.75, ease: 'power3.out' },
          '-=0.4'
        )
        tl.to(
          navLinks.words,
          { yPercent: 0, duration: 0.75, stagger: 0.05, ease: 'power3.out' },
          '<0.1'
        )
        tl.to(
          heading.chars,
          {
            y: 0,
            opacity: 1,
            scale: 1,
            duration: 1.5,
            stagger: 0.015,
            ease: 'elastic.out(0.75, 0.25)',
          },
          '<0.15'
        )
        tl.to(
          footerText.lines,
          { yPercent: 0, duration: 0.75, stagger: 0.1, ease: 'power3.out' },
          '<0.2'
        )
        tl.to('.hero-img-bg', { scale: 1, duration: 1, ease: 'power3.out' }, '<0.1')
        tl.to('.hero-img img', { y: '-50%', duration: 1, ease: 'power3.out' }, '<0.3')

tl.set('.preloader', { display: 'none' })
      }, rootRef)
    })

// cleanup: SplitTextを戻し、gsap.contextで生成物をまとめて破棄する
    return () => {
      cancelled = true
      splits.forEach(split => split && split.revert())
      if (context) context.revert()
    }
  }, [])

return (
    <div ref={rootRef} className="reveal-root">
      <div className="preloader">
        <div className="preloader-bg"></div>
        <div className="preloader-revealer preloader-revealer-1"></div>
        <div className="preloader-revealer preloader-revealer-2"></div>
        <div className="preloader-revealer preloader-revealer-3"></div>
        <div className="preloader-revealer preloader-revealer-4"></div>

<div className="items">
          {PRELOADER_ITEMS.map((src, i) => (
            <div key={i} className={`item item-${i + 1}`}>
              <img src={src} alt="" />
            </div>
          ))}
        </div>

<nav>
        <div className="nav-logo">
          <img src={LOGO} alt="" />
        </div>
        <div className="nav-items">
          {NAV_LINKS.map(label => (
            <a key={label} href="#">
              {label}
            </a>
          ))}
        </div>
      </nav>

<section className="hero">
        <div className="hero-header">
          <h1>The table you will keep coming back to every week</h1>
        </div>

<div className="hero-footer">
          <p>Locally Sourced</p>
          <p>Always Welcome</p>
        </div>
      </section>
    </div>
  )
}