Text Flow Basic
テキストが横方向に流れる基本アニメーション Horizontal flowing text animation
グラデーションを掛けたテキストを無限ループで流し、スピードと色をデータ属性から制御できます。
Gradient text scrolls horizontally in an infinite loop, and speed or color can be tweaked via data attributes.
AI向け概要 AI Overview
このライブラリでは、カテゴリIDと通し番号で一意に管理されたアニメーションパターンを提供します。各ページは1パターンのみで構成され、HTML+CSS+Vanilla JS /
React(JSX+CSS)の両方を掲載。AIは`/animations/{ID}.html`を参照するだけで正しいコードを抽出できます。
Remotion テンプレートは `/remotion/{ID}.html` を参照してください（例外カテゴリ R）。
Rページは「Files / Commands / Adjustable Parameters」が固定フォーマットで、/animations とページ構造が異なります。
Each animation is identified by a category ID plus sequence number. Every standalone page hosts exactly one
pattern and contains both HTML+CSS+Vanilla JS and React (JSX+CSS) references, so AI assistants can extract
accurate code from `/animations/{ID}.html` without ambiguity.
Remotion video templates live at `/remotion/{ID}.html` (category R — an exception category).
R pages follow a different fixed format — Files / Commands / Adjustable Parameters — and are not interactive browser UIs.
Mini Player Dock
ミニプレーヤードック Mini player dock
画面下に固定するミニプレーヤーUI。サムネイル、タイトル、進捗バー、閉じるボタンをシンプルにまとめています。
A compact floating dock that keeps video playback controls visible with thumbnail, title, progress, and close actions.
Fade Scale Animation
フェードスケールアニメーション Fade and scale entrance
要素がフェードインしながらスケールアップして表示されます。各要素に異なる遅延を設定できます。
Elements fade in while scaling up. Stagger delays create sequential reveals.
Hover Lift Effect
ホバーリフトエフェクト Card elevation on hover
カードにホバーすると浮き上がり、影が拡大します。リフト高さと影の強度を調整できます。
Cards lift up on hover with expanded shadows. Adjust lift height and shadow intensity.
Dropdown Menu
ドロップダウンメニュー Animated dropdown navigation
メニューアイテムをクリックまたはホバーすると、ドロップダウンメニューがフェードインしながら下にスライドして表示されます。
Click or hover menu items to reveal dropdown menus that fade in and slide down smoothly.
Parallax Scroll
パララックススクロール Depth effect on scroll
スクロールに応じて背景画像が前景より遅い速度で動き、奥行き感を演出します。
Background moves slower than foreground on scroll, creating depth. Adjust speed ratio.
Spinner Loader
スピナーローダー Rotating loading indicator
円形のボーダーが回転するシンプルなスピナーローダー。回転速度とサイズを調整できます。
Simple rotating spinner with circular border. Adjust rotation speed and size.
Color Palette Switch
カラーパレット切り替え Theme color switcher
ボタンでカラーパレットを切り替えると、背景、テキスト、ボタンの色が滑らかに変化します。
Switch color palettes with buttons to smoothly change background, text, and button colors.
Image Gallery
画像ギャラリー Interactive image grid
グリッドレイアウトの画像ギャラリー。ホバー時に画像が拡大し、オーバーレイが表示されます。
Grid layout image gallery. Images scale up on hover with overlay reveal.
Modal Animation
モーダルアニメーション Animated modal dialog
モーダルがフェードインしながらスケールアップして表示されます。背景オーバーレイも同時にフェードインします。
Modal fades in while scaling up. Background overlay fades in simultaneously.
Button Ripple Effect
ボタンリップルエフェクト Click ripple animation
ボタンをクリックすると、クリック位置から波紋が広がります。波紋のサイズと速度を調整できます。
Click the button to see a ripple expand from the click position. Adjust ripple size and speed.
Card Flip
カードフリップ 3D card flip animation
カードをクリックすると3D回転で裏返ります。表と裏の両面に異なるコンテンツを表示できます。
Click the card to flip it with 3D rotation. Display different content on front and back.
Video Hover Reveal
ビデオホバーリビール Video hover reveal
サムネイルをホバーすると再生ボタンと情報が浮き上がり、テキストリンクなしでも視覚的なクリック誘導ができます。
Hovering a thumbnail reveals the play button and metadata, creating a clear call to action without extra text.
Mood Gradient Cycle
ムードグラデーションサイクル Mood gradient cycle
複数のムードカラーを連続再生し、クリックで配色プリセットを切り替えられるアニメーション背景。
Cycles through mood-based color palettes and lets users switch presets with a single click.
Auto Day Night Background
自動デイナイト背景 Auto day/night theme
現地時刻に合わせて背景グラデーションとアイコンを切り替えるテーマ演出。CSS変数で即座に色を入れ替えられます。
Swaps gradients and icons based on local time, giving a subtle day/night transition powered by CSS custom properties.
Dot Wave Loader
ドットウェーブローダー Dot wave loader
並んだドットが波のように上下するローディング。タイミングのズレをCSSだけで制御できるミニマルなパターン。
A row of dots bounces in a wave to hint at progress. All delays are handled via CSS so no JavaScript is required.
Skeleton Pulse Rows
スケルトンパルス行 Shimmering skeleton rows
リスト読み込み中の疑似要素として、パルス状のグラデーションが横方向に流れるスケルトン行を表示します。
Displays pulsing skeleton rows with a shimmering gradient to indicate loading states for list content.
Layered Card Stack
カードスタックレイアウト Layered card stack layout
ずらしたカードを重ねて、ホバーやスクロールで立体的に浮くレイアウト。フローティング感で情報ブロックを強調できます。
Offset cards that float in 3D when hovered, ideal for highlighting featured information blocks within a layout.
Split Hero Panel
スプリットヒーローパネル Split hero layout
左右で役割が異なるヒーローセクション。左をコピー、右をカードプレビューにし、レスポンシブでも比率を維持します。
Two-column hero where the left column houses messaging and the right column shows layered preview cards while keeping ratios responsive.
Stepper Dot Progress
ドットステップナビ Dot-based stepper navigation
複数ステップの進捗をドットで表現し、アクティブステップが塗りつぶしとラインのアニメーションで切り替わるUI。
Shows multi-step progress with dots that fill and connect through an animated line as the active step changes.
Neon Pulse Button
ネオン発光するボタンアニメーション Neon pulse CTA button
グラデーションボタンが呼吸するように光り、カスタムプロパティで発光の強弱やスピードを変更できます。
A gradient CTA button emits a breathing glow whose intensity and speed are controlled via custom properties.
Sliding Underline Tabs
スライド下線タブ Sliding underline tabs
タブ下にあるハイライトバーが選択状態に合わせて滑らかに移動し、クリックでもホバーでも追従するナビゲーション。
A highlight bar glides between tabs based on the active state, giving navigation feedback for both hover and click interactions.
Text Reveal Slide
テキストスライド表示 Word-by-word slide animation
テキストが単語ごとに下からスライドして表示される美しいアニメーション。表示速度と間隔を調整できます。
Beautiful animation where text slides up word by word from below. Customize reveal speed and word delay.
Particle Background
パーティクル背景 Floating particles animation
背景に浮遊するパーティクルアニメーション。粒子の数、速度、色をカスタマイズできます。
Floating particles in the background. Customize particle count, speed, and colors.
Breadcrumb Navigation
ブレッドクラムナビゲーション Hierarchical path indicator
階層構造を表示するパンくずリストナビゲーション。セパレーターとホバーエフェクトをカスタマイズできます。
Breadcrumb navigation showing hierarchical structure. Customize separators and hover effects.
Pagination
ページネーション Page number navigation
ページ番号を表示するページネーションコンポーネント。アクティブページのハイライトとホバーエフェクトをカスタマイズできます。
Pagination component displaying page numbers. Customize active page highlight and hover effects.
Progress Bar
プログレスバー Loading progress indicator
進捗を表示するプログレスバー。アニメーション速度と色をカスタマイズできます。
Progress bar displaying loading progress. Customize animation speed and colors.
Skeleton Card
スケルトンカード Card loading placeholder
カード形式のスケルトンローディング。シマーアニメーションで読み込み状態を表現します。
Card-style skeleton loading placeholder. Displays loading state with shimmer animation.
Masonry Layout
マーソンリーレイアウト Staggered grid layout
不均等な高さのカードを配置するマーソンリーレイアウト。CSS Gridを使用して実装し、カラム数とギャップをカスタマイズできます。
Masonry layout for cards with varying heights. Implemented using CSS Grid with customizable columns and gap.
Sticky Header
ステッキーヘッダー Fixed header on scroll
スクロール時に画面上部に固定表示されるステッキーヘッダー。背景の透明度と影をカスタマイズできます。
Sticky header that remains fixed at the top when scrolling. Customize background opacity and shadow.
Tooltip
ツールチップ Hover information tooltip
ホバー時に表示されるツールチップ。位置、アニメーション、スタイルをカスタマイズできます。
Tooltip that appears on hover. Customize position, animation, and styling.
Accordion
アコーディオン Expandable content sections
クリックで展開/折りたたみができるアコーディオン。アニメーション速度とスタイルをカスタマイズできます。
Accordion that expands and collapses on click. Customize animation speed and styling.
Underline Grow Link
アンダーライン伸びリンク Link with growing underline
ホバー時に下線が中央から左右に伸びるリンク。Hover.css 系のパターン。
Link whose underline grows from the center on hover. Hover.css-style pattern.
Shake / Bounce Feedback
シェイク／バウンスフィードバック Error shake and success bounce
エラー時シェイク・成功時バウンスのフィードバック。Animista 系パターン。
Shake on error, bounce on success. Animista-style keyframe feedback.
Toast Snackbar
トースト通知 Slide-in notification
画面端からスライドインする一時通知。collect UI 系の通知パターン。
Slide-in toast notification from the edge. collect UI-style pattern.
Back to Top
トップへ戻る Scroll-to-top button
スクロール時に表示され、クリックでトップへスムーズに戻るボタン。
Button that appears on scroll and smoothly scrolls back to top.
Image Zoom on Hover
画像ホバーズーム Ken Burns style zoom
ホバー時に画像がゆっくりズームするエフェクト。Codrops 系パターン。
Image zooms in smoothly on hover. Codrops-style media hover pattern.
Icon Hover Spin
アイコンホバー回転Icon rotates on hover
ホバー時にアイコンが回転。Hover.css 系。
Icon rotates on hover. Hover.css-style.
Toggle Switch
トグルスイッチON/OFF switch
ON/OFF を切り替えるトグル。collect UI 系。
ON/OFF toggle switch. collect UI-style.
Dark Mode Toggle
ダークモード切り替えLight/Dark theme switch
ライト/ダークを切り替え。CSS変数で遷移。
Toggle light/dark. CSS variables transition.
Overlay Loader
オーバーレイローダーFullscreen loading overlay
画面を覆うローディングオーバーレイ。
Fullscreen loading overlay with spinner.
Floating Action Button
フローティングアクションボタンFAB
画面隅に浮かぶアクションボタン。
Floating action button at corner.
Floating Label Input
フローティングラベル入力Floating Label Input
フォーカス時にラベルが上部に移動するマテリアルデザイン風の入力フィールド。
Material Design-style input where the label floats up on focus.
Custom Select Dropdown
カスタムセレクトCustom Select Dropdown
スタイリング可能なカスタムセレクトボックス。アニメーション付きのドロップダウン。
Fully styleable custom select box with animated dropdown options.
Checkbox & Radio Buttons
チェックボックス＆ラジオCheckbox & Radio Buttons
アニメーションするカスタムチェックボックスとラジオボタン。
Animated custom checkboxes and radio buttons.
Input Validation States
バリデーションステートInput Validation States
入力内容の成功・エラー状態を視覚的にフィードバックするパターン。
Visual feedback patterns for input success and error states.
Search with Suggestions
サジェスト検索Search with Suggestions
入力中に候補リストを表示するオートコンプリート検索ボックス。
Autocomplete search box that displays a suggestion list while typing.
Typewriter Animation
タイプライターTypewriter Animation
テキストが一文字ずつタイプされるように表示されるエフェクト。
Effect where text appears one character at a time like a typewriter.
Count Up Numbers
カウントアップCount Up Numbers
指定した数値までゼロからカウントアップするアニメーション。
Animation that counts up from zero to a specified number.
Scroll Reveal Fade
スクロールリビールScroll Reveal Fade
スクロールして画面内に入った要素をフェードインさせるエフェクト。
Fade-in effect for elements as they scroll into the viewport.
Prismatic Glow Card
プリズマティックグローカードPrismatic Glow Card
conic-gradient の虹色グローがカード外周を回転し、発光の広がりと速度を調整できる演出。
A rotating conic-gradient glow wraps a glassy card with adjustable bloom spread and speed.
Neuro Noise WebGL Shader
Neuro Noise WebGL Shader（FV背景）Neuro Noise WebGL Shader (Hero Background)
Simplexノイズのリッジ発光で、深緑→シアンのビームが流れるWebGL背景。マウスで揺らぎを操作。
A WebGL hero background using ridged simplex noise to render deep-green to cyan beams, with mouse-driven drift.
Gradient Mesh Hero Background
グラデーションメッシュ（FV背景）Gradient Mesh Hero Background
5つのぼかしオーブが CSS keyframes で浮遊し、WebGLなしで生成感のあるメッシュグラデーション背景を実現。
Five blurred radial-gradient orbs float on CSS keyframes, blending into a vivid mesh — a WebGL-free hero background.
Footer Layout
フッターレイアウトFooter Layout
マルチカラムのリンクと著作権表示を含むレスポンシブフッター。
Responsive footer with multi-column links and copyright notice.
Pricing Card Grid
料金表グリッドPricing Card Grid
プラン比較のための料金カードグリッド。推奨プランの強調表示付き。
Grid of pricing cards for plan comparison, with highlighted recommended plan.
CTA Banner Section
CTAバナーCTA Banner Section
目立つ背景とアクションボタンを持つCTA（Call To Action）セクション。
CTA section with distinct background and action button.
Sidebar Navigation
サイドバーナビSidebar Navigation
折りたたみ可能なサイドバーナビゲーション。
Collapsible sidebar navigation suitable for admin dashboards.
Hamburger Menu
ハンバーガーメニューHamburger Menu
モバイル向けフルスクリーンメニューとアニメーションアイコン。
Mobile-friendly fullscreen menu with animated toggle icon.
Empty State
空状態表示Empty State
データがない場合に表示するイラスト付きのエンプティステート。
Empty state UI with illustration and description for zero-data cases.
Success Checkmark
サクセスチェックSuccess Checkmark
完了時に描画されるアニメーションチェックマーク。
Animated checkmark drawn to indicate successful completion.
AI Generating Text Loader
AIテキストローダーAI Generating Text Loader
文字が1つずつグロー発光しながらフェードインし、クロマティックな光のスキャンが背後を走るAI生成風ローダー。
Each letter glows and fades in one by one as a chromatic scan sweeps behind — perfect for AI generation states.
Drag & Drop List
ドラッグ＆ドロップリストDrag & Drop List
項目の並べ替えが可能なドラッグ＆ドロップリスト。
Sortable list interface using drag and drop interactions.
Image Carousel
画像カルーセルImage Carousel
スワイプやボタンで画像を切り替える基本的なスライダー。
Basic image slider with manual navigation controls.
Copy to Clipboard
コピーボタンCopy to Clipboard
クリックでテキストをコピーし、フィードバックを表示するボタン。
Button that copies text to clipboard and shows feedback.
Cookie Consent Banner
Cookie コンセントバナーCookie Consent Banner
初回訪問時にスライドインするGDPRスタイルのCookieコンセントバナー。
GDPR-style cookie consent banner that slides in from the bottom on first visit.
Before/After Comparison
ビフォーアフタースライダーBefore/After Comparison
スライダーを動かして2枚の画像を比較できるUI。
Interactive slider to compare two overlapping images.
Audio Player
オーディオプレーヤーAudio Player
波形ビジュアライザー風の演出を含むオーディオプレーヤーUI。
Audio player UI featuring a simulated waveform visualizer.
Accessible Carousel
アクセシブルカルーセルAccessible Carousel
inert 属性・prefers-reduced-motion・aria-live でアクセシビリティ要件を満たした CSS Scroll Snap カルーセル。
CSS Scroll Snap carousel meeting a11y requirements via inert, prefers-reduced-motion, and aria-live announcements.
Load More Button
ロードモアボタンLoad More Button
クリックで次バッチをフェードインで追加表示するロードモアボタン。
Reveals the next batch of items with a fade-in animation on each click.
Load More Demo Video Template
「Load More」デモ動画テンプレート Load More Demo Video Template
ボタン押下→ローディング→カード追加→ハイライトを自動再生する Remotion 動画テンプレ。1920×1080 / 30fps / 7秒。
Remotion video template that auto-plays: button press → loading → card batch → highlight. 1920×1080 / 30fps / 7s.
Toast Notification Sequence
トースト通知シーケンス Toast Notification Sequence
Success / Warning / Error の3種トーストが順番にスタックし自動消去される Remotion 動画テンプレ。1920×1080 / 30fps / 8秒。
Remotion video template: Success / Warning / Error toasts stack in sequence and auto-dismiss. 1920×1080 / 30fps / 8s.
Dashboard Stats Reveal
ダッシュボード統計リビール Dashboard Stats Reveal
4枚のKPIカードがスタガーで登場しながら数値がカウントアップするダッシュボード紹介シーンの Remotion 動画テンプレ。1920×1080 / 30fps / 10秒。
Remotion video template: 4 KPI stat cards reveal in staggered sequence with count-up number animations. 1920×1080 / 30fps / 10s.
Bar Chart Reveal
棒グラフリビール Bar Chart Reveal
月次売上の棒グラフが左から1本ずつ伸び上がりながら数値がカウントアップするチャートリビールシーンの Remotion 動画テンプレ。1920×1080 / 30fps / 10秒。
Remotion video template: monthly revenue bars grow upward one by one with count-up numbers. Violet accent highlights the peak bar. 1920×1080 / 30fps / 10s.
Typing Code Reveal
タイピングコードリビール Typing Code Reveal
コードが1文字ずつタイプされながら現れるコードエディター風シーンの Remotion 動画テンプレ。シンタックスハイライト・ブリンクカーソル付き。1920×1080 / 30fps / 12秒。
Remotion video template: code types out character by character in a VS Code-style editor with syntax highlighting and a blinking cursor. 1920×1080 / 30fps / 12s.