Motion Demo — SQUARE ONE Cockpit

STEP 2 / 6subtle

フェードイン・軽いパララックス・行単位の出現。site / proposal / 一般 LP の既定。読み手に押し付けない柔らかさ。

1-A · Staggered Section Reveal

スクロールしてこのセクションが画面に入った瞬間、子要素が時差で fade-up。

1A

順次に出現

1B

少し遅れて

1C

最後に

2-A · Background Parallax

スクロール量に応じて背景が遅く動く。スクロールしてこのブロックが画面を通過する間に観察。

PARALLAX

4-B · Line-by-Line Reveal

各行が個別に下から fade-in。長文の段落で効果的。

この行は最初に出てきます。

この行はその次に出てきます。

そして三行目。

最後の行。読み手の目線が下に流れる。

1-D · Bottom-Up Slide

底から強めに突き上げる。1-A よりも勢いがあり主役を見せる場面で。

突き上げ

11-A · Scroll Progress Bar

ページ上端の細いバー(オレンジ)がスクロール量を示す。すでにこのページ全体に適用中。

↑ ページ上端を見るとスクロール量がオレンジの細いバーで表示されている

10-A · Button Magnetic(軽め)

マウスがボタンに近づくとボタンが少しマウスに引き寄せられる。

STEP 3 / 6 · NEWambient

粒子・グラデーション流動・ぼかし・波形の永続アニメーション。subtle と narrative の中間。背景が常に静かに動いている状態を作る。リゾート・ウェルネス・hero セクションで効果的。

15-B · Mesh Gradient Animation

複数のラジアルグラデーションが滑らかに動く。プレミアム系プロダクトの hero に。

15-C · Aurora

オーロラ風に色が流れる。ぼかしを強くかけて空気感を演出。

12-A · Floating Particles

canvas でふわふわ漂う粒子。星空・微粒子・空気感の演出に。

12-B · Connected Lines

近距離の粒子同士が線で結ばれる。ネットワーク・データ可視化のメタファー。

1-F · Blur-to-Focus

ぼかし状態から鮮明になる。スクロールでこの見出しが入った瞬間。

FOCUS

4-G · Letter Wave

文字が永続的に上下に波打つ。優しい呼吸感。

BREATHE

13-C · SVG Wave Loop

波形 SVG が永続的に動く。海・水・流動の演出に。

16 · Blob Float (organic shape)

変形した有機的な丸 (blob) が translate + rotate + scale で永続 float。Brutalist + playful 系の hero / About 背景に頻出。SITE-02 VOLT で初出。

17 · Brutalist Pill Hover Fill

透明 pill ボタンが hover で塗り potion + translateY(-2px)。SITE-02 / brutalist creative studio 系 CTA の defacto。

事例を見る → 相談する →

18 · Header Backdrop-Blur on Scroll

スクロール 40px 超えで sticky header に backdrop-filter:blur(12px) + 半透明 bg をフェードイン。Apple / Stripe / Linear 系 + brutalist studio すべてで使われる現代の defacto。

JS:

window.addEventListener('scroll', () => {
  const h = document.getElementById('siteHeader');
  if (window.scrollY > 40) h.classList.add('is-scrolled');
  else h.classList.remove('is-scrolled');
}, { passive: true });

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

STEP 4 / 6narrative

ピン固定・ワイプ遷移・char-reveal・カウンター・スムーズスクロール。lp(物語系) / proposal(章立て) で物語性を演出。

4-A · Character Split Animation

スクロールでこのブロックが画面に入ったとき、見出しの文字が一文字ずつ下から出る。

A NEW STORY BEGINS

4-C · Counter Animation

数字が0からターゲット値までカウントアップ。スクロールでこのブロックが見えたとき発火。

継続率

導入企業

¥0B

ARR

2-D · Pinned Depth Scroll

下のブロックがピン固定され、スクロール量に応じて中の3層が奥行き方向に動く(↓画面で固定されながらスクロール)。

FRONT

MIDDLE

BACK

7-B · Section Wipe

スクロールでこのブロックが見えたとき、左から clipPath で wipe。

CHAPTER ONE

3-B · Sticky Reveal

下のブロックがピン固定され、スクロール量で中身が切り替わる。

STAGE 1

最初の状態。スクロールすると次へ。

STAGE 2

中盤。スクロールでさらに次へ。

STAGE 3

最終形。物語の到達点。

1-G · Skew Reveal

斜めに歪んだ状態から整って出現。動きに少し緊張感を与える。

Skew Reveal Card

歪み → 整列。アクセントの効いた reveal。

4-F · Type-On(タイプライター)

スクロールでこのブロックが見えたとき、コードが1文字ずつタイプされる。

npm install @design-master/v4

13-A · SVG Path Drawing

SVG の線が描画されるように出現。インフォグラフィック・ロゴアニメに。

3-G · Pinned Comparison(Before/After)

下のブロックがピン固定中、スクロール量で前後が比較スライド。

BEFORE

AFTER

3-H · Kamishibai Stage Swap (4-layer tab UI)

1 つのステージに 4 層が積み重なり、右レールの色付きタブを叩くと該当層が translateX(100% → 0) で全面スライドイン。SITE-03 で初出。

STAY

EAT

PLAY

BATH

3-I · Bookmark Slide-in (right→left しおり reveal)

セクション入場時に右側のしおり要素が translateX(120px) rotate(2deg) → 0 で滑り込み。SITE-03 area-card で使用 (sd-bookmark-r)。

3-J · Blueprint Grid Pan (SITE-04)

編集ブルータル系: orange bg + 36px グリッド pan + 中央 scan line + glow drift + status row + loader bar の同時走行。technical / blueprint vibe。

● SAITAMA → KAGAWA · LOCAL // CUTTING-EDGE · AXIS / 2026

BUILDING
NEW AXES

3-K · RGB Displacement Glitch (SITE-04)

image を base + R + G + B + scan band の 5 レイヤー合成。RGB 各チャンネルが独立 translate でズレ + 走査線が定期的に流れる。chromatic aberration。

3-L · Char-by-Char SkewY Reveal (SITE-04)

大型 italic セリフテキストを文字単位で分割 → 1 文字ずつ 25ms 遅延で skewY(6deg) translateY → 0 立ち上げ。section label / manifesto の defacto。

Reframe the centre.

※このページ全体に Lenis のスムーズスクロール(7-A)が適用されている

STEP 5 / 6interactive

横スクロール・カスタムカーソル・マグネットボタン・スライスリビール。lp(クリエイティブ系) で表現を主張。

5 · Custom Cursor

このセクション内ではマウスカーソルがオレンジ円に置き換わる。リンク・ボタンにホバーすると拡大。セクション外に出ると消える。

2-E · Image Grid Parallax

スクロール時、各画像が異なる速度で動く。

8-A · Image Reveal Mask

スクロールでこのブロックが見えたとき、左から clipPath で画像が現れる。

8-B · Diagonal Wipe

斜めにワイプして出現。

DIAGONAL

8-C · Circle Reveal

中心から円形に広がって出現。

RIPPLE

4-E · Text Scramble

ランダム文字がシャッフルしながら最終文字列に確定する。スクロールで発火。

HACK_THE_SYSTEM

4-H · Marquee(無限スライド)

右から左へ無限に流れる。ロゴ並びやニュースティッカーで頻出。

DESIGN · CREATE · ITERATE · SHIP · DESIGN · CREATE · ITERATE · SHIP ·

15-A · Glitch Effect

RGB ずらし + clip-path のループでグリッチ表現。サイバーパンク・ストリート系に。

GLITCH

1-H · Number Roll(オドメーター数字ロール)

縦方向にロールして 01 → 02 → 03 と切り替わるエディトリアル定番。

CHAPTER 01020304

4-K · Persona Cycle(ペルソナ・テキスト循環)

ターゲットを縦スクロールで順次表示。"For: System Architects → Institutional Traders → ..." と回す。

For: System Architects Institutional Traders Risk Managers Algorithmic Quants

5-F · Cursor Tag Follower(マウス追従ラベル)

下のリンクや画像にホバーすると、マウスカーソルに黒いピル型ラベルが追従。Awwwards 系の編集サイト定番。

Algorithmic Precision Post-Trade Forensics Smart Alerts Live Markets

11-E · Live Pill Tag(ライブ数値ピル)

黒のピル形状の中で数値が定期的に動的更新。状態表示・トレーディング系で頻出。

Slippage Mitigated: 94.2%

Latency: 14.3 ms

Hit Rate: 70.5%

12-F · Halftone Dot Field(ハーフトーンドット背景)

エディトリアル定番のドットグラデーション。canvas で実装、密度差で立体感を演出。

Algorithmic Precision

16-C · Peek-Next Card Carousel(次カード見え見せの横スライド)

中央のカードに加えて、左右の隣接カードが少しだけ見える状態でスライド。都市/物件カードで頻出。

NYC Exchange

The NYC Exchange, located in the heart of the Financial District, is the world's largest stock exchange by market capitalization.

+30 more are watching

London Stock Exchange

The London Stock Exchange, a historic market established in 1801, is known for its global reach and diverse range of listed companies.

+25 more are engaged

Tokyo Stock Exchange

The Tokyo Stock Exchange is the largest stock market in Asia and has a major global influence on financial markets.

+40 more are observing

16-D · Avatar Stack with Counter(アバタースタック+カウンタ)

重なり合った円形アバター + 「+30 more are watching」のテキスト。視聴者数の生きている表現。