— Hub 03

Motion.
動きで、印象を磨く。

実装可能なCSSアニメーション集。ライブプレビューで効果を確認、
「コードをコピー」で即実装できます。

— 01 Glow Pulse
グロー パルス
ヒーロー背景の光・CTAボタン強調・ロゴアクセント。使うべき: ブランディング/SaaS。
— 02 Floating Orbits
回転オービット
ヒーロービジュアル・ロゴまわり・宇宙感の演出。使うべき: テック/SaaS/ブランディング。
— 03 Fade Up Sequential
順次フェードイン
特徴カード・ステップ表示・サービス一覧。使うべき: 全業種で安全に使える定番。
HOVER ME
— 04 Hover Tilt 3D
ホバー 3Dチルト
カード・サービス紹介・実績一覧。マウスホバーで奥行き感。使うべき: ポートフォリオ系。
BRANDING·DESIGN·STRATEGY·BRANDING·DESIGN·STRATEGY·
— 05 Marquee
マーキー（流れる文字）
サービスタグ・実績ロゴ列・キーワード強調。使うべき: クリエイティブ/エージェンシー。
Hello, World.
— 06 Reveal Up
リビールアップ（出現）
ヒーロー見出し・セクションタイトル。スクロール時のドラマ性。使うべき: ブランディング/上品なサイト。
— 07 Light Beam
ライトビーム（光放射）
TERASU 専用世界観。「光で照らす」表現の象徴。使うべき: TERASU公式系・上品系。
TERASU
— 08 Shine Text
シャインテキスト（光沢）
ロゴ・ヒーロー見出し・ブランド名強調。プレミアム感の演出。使うべき: 高級感が必要な業種。
— Code Snippets / コードスニペット集

クリックで該当HTML/CSS/JSコードをクリップボードへコピー。順次拡充予定。

— 業種別 使い分けの基本
  • 士業・医療: 動きは控えめ。Fade Up（03）程度に留める。Marquee（05）等の派手な動きは厳禁。
  • SaaS・テック: Glow Pulse（01）/ Orbits（02）/ Tilt（04）が映える。
  • ブランディング・エージェンシー: Marquee（05）/ Reveal Up（06）/ Shine（08）でクリエイティビティ表現。
  • TERASU公式系: Light Beam（07）/ Shine（08）が世界観に合う。
`, hero: `

キャッチコピー1行目
キャッチコピー2行目

サブコピー

無料で相談する →
`, cta: ` 無料で相談する → `, responsive: `/* TERASU 推奨：モバイル → タブレット → PC の順で書く */ .element{ /* mobile (default) */ font-size:.9rem; padding:1rem; } @media(min-width:768px){ .element{ /* tablet */ font-size:1rem; padding:1.5rem; } } @media(min-width:1024px){ .element{ /* PC */ font-size:1.1rem; padding:2rem; } } /* clamp() で滑らかにスケール */ h1{font-size:clamp(2rem,5vw,3.6rem)}`, header: `
`, footer: ` `, reveal: `
スクロールで現れる要素
` }; function copySnippet(id) { const code = snippets[id]; if (!code) return; navigator.clipboard.writeText(code).then(() => { const btn = event.target; const orig = btn.textContent; btn.textContent = '✓ コピー済'; btn.style.background = 'rgba(255,200,120,.15)'; btn.style.color = 'var(--amb)'; btn.style.borderColor = 'var(--amb)'; setTimeout(() => { btn.textContent = orig; btn.style.background = ''; btn.style.color = ''; btn.style.borderColor = ''; }, 2000); }); } function copyMotion(id) { const code = motionCodes[id]; if (!code) return; navigator.clipboard.writeText(code).then(() => { const btn = event.target; btn.textContent = '✓ コピー済'; btn.classList.add('copied'); setTimeout(() => { btn.textContent = '📋 コピー'; btn.classList.remove('copied'); }, 2000); }); }