Text Flow Basic テキストが横方向に流れる基本アニメーション
Gradient text scrolls horizontally in an infinite loop with speed controlled via a custom property. グラデーションテキストを無限ループで横方向に流し、スピードをカスタムプロパティで制御します。
View DetailsNeon Pulse Button ネオン発光ボタン
A gradient CTA button breathes with a neon glow whose intensity and speed are adjustable via custom properties. グラデーションCTAが呼吸するように発光し、強度やスピードをカスタムプロパティで調整できます。
View DetailsFade Scale Animation フェードスケールアニメーション
Elements fade in while scaling up for entrance animations with staggered delays. 要素がフェードインしながらスケールアップして表示されるエントランスアニメーション。
View DetailsHover Lift Effect ホバーリフトエフェクト
Cards lift up on hover with expanded shadows. Adjust lift height and shadow intensity. ホバー時にカードが浮き上がり影が拡大するエフェクト。リフト高さと影の強度を調整できます。
View DetailsText Reveal Slide テキストスライド表示
Beautiful animation where text slides up word by word from below. Customize reveal speed and word delay. テキストが単語ごとに下からスライドして表示される美しいアニメーション。表示速度と間隔を調整できます。
View DetailsParticle Background パーティクル背景
Floating particles in the background. Customize particle count, speed, and colors. 背景に浮遊するパーティクルアニメーション。粒子の数、速度、色をカスタマイズできます。
View DetailsUnderline Grow Link アンダーライン伸びリンク
Link with underline that grows from the center on hover. Hover.css-style pattern. ホバー時に下線が中央から左右に伸びるリンクスタイル。Hover.css 系のパターン。
View DetailsShake / Bounce Feedback シェイク／バウンスフィードバック
Shake on error and bounce on success. Animista-style keyframe feedback. エラー時シェイク・成功時バウンスのフィードバックアニメーション。Animista 系のキーフレームパターン。
View DetailsIcon Hover Spin アイコンホバー回転
Icon rotates on hover. Hover.css-style pattern. ホバー時にアイコンが回転するエフェクト。Hover.css 系のパターン。
View DetailsTypewriter Animation タイプライター
Effect where text appears one character at a time like a typewriter. テキストが一文字ずつタイプされるように表示されるエフェクト。
View DetailsCount Up Numbers カウントアップ
Animation that counts up from zero to a specified number. 指定した数値までゼロからカウントアップするアニメーション。
View DetailsScroll Reveal Fade スクロールリビール
Fade-in effect for elements as they scroll into the viewport. スクロールして画面内に入った要素をフェードインさせるエフェクト。
View DetailsPrismatic Glow Card プリズマティックグローカード
A rotating conic-gradient glow wraps a glassy card with adjustable bloom spread and speed. conic-gradient の虹色グローがカード外周を回転し、発光の広がりと速度を調整できる演出。
View DetailsNeuro Noise WebGL Shader (Hero Background) Neuro Noise WebGL Shader（FV背景）
A WebGL hero background using ridged simplex noise to render deep-green to cyan beams, with mouse-driven drift. Simplexノイズのリッジ発光で、深緑→シアンのビームが流れるWebGL背景。マウスで揺らぎを操作。
View DetailsGradient Mesh Hero Background グラデーションメッシュ（FV背景）
Five blurred radial-gradient orbs float on CSS keyframes, blending into a vivid mesh — a WebGL-free hero background. 5つのぼかしオーブが CSS keyframes で浮遊し、WebGLなしで生成感のあるメッシュグラデーション背景を実現。
View DetailsWater Ripple Hero Background 水面の波紋（FV背景 / Canvas）
Simulate a water surface on a 2D canvas and refract a hero background through it, with ripples following the pointer. Canvas 2D 上で水面をシミュレートし、ヒーロー背景を屈折させます。ポインタの動きに合わせて波紋が広がります。
View DetailsLayered Wave Section Divider 波形アニメーションのセクション区切り（SVG）
Turn a section boundary into a moving water line with layered SVG waves that react to the pointer. 重ねた SVG の波でセクションの境目を動く水面に変え、カーソル操作に反応させます。
View DetailsLiquid Fill Gauge 水が満ちる液体ゲージ（SVG）
Show progress, capacity or scores as water rising inside a circle, with a surface that reacts to clicks. 進捗・容量・スコアを円の中で満ちる水として表示し、クリックにも反応します。
View DetailsWater Caustics Hero Background 水底の光の揺らぎ（FV背景 / Canvas）
A caustics light-net hero background that looks like sunlight rippling on a pool floor, computed on a tiny canvas and stretched with CSS. プールの底で揺れる日差しのような光の網目を、小さなCanvasで計算してCSSで引き伸ばすヒーロー背景です。
View DetailsSkeleton Pulse Rows スケルトンパルス行
Shimmering skeleton rows for list-loading states with adjustable speed. リスト読み込み時の骨組み表示をシマーアニメーションで表現するパターン。
View DetailsDot Wave Loader ドットウェーブローダー
CSS-only dot wave loader using staggered animation-delay for each dot. Pure CSS, lightweight, highly customizable. 各ドットにanimation-delayをずらすだけでウェーブ効果を実現するCSS専用ローダー。軽量でカスタマイズ性が高い。
View DetailsSpinner Loader スピナーローダー
Rotating spinner loader. Adjust rotation speed and size via custom properties. 回転するスピナーローダー。回転速度とサイズをカスタムプロパティで調整できます。
View DetailsProgress Bar プログレスバー
Progress bar displaying loading progress. Customize animation speed and colors. 進捗を表示するプログレスバー。アニメーション速度と色をカスタマイズできます。
View DetailsSkeleton Card スケルトンカード
Card-style skeleton loading placeholder. Displays loading state with shimmer animation. カード形式のスケルトンローディング。シマーアニメーションで読み込み状態を表現します。
View DetailsToast Snackbar トースト通知
Slide-in notification from the edge. Adjust display duration and animation speed. 画面端からスライドインする一時通知。表示時間とアニメーション速度を調整できます。
View DetailsOverlay Loader オーバーレイローダー
Fullscreen loading overlay with fade. Spinner and message. 画面全体を覆うローディングオーバーレイ。フェード表示。
View DetailsEmpty State 空状態表示
Empty state UI with illustration and description for zero-data cases. データがない場合に表示するイラスト付きのエンプティステート。
View DetailsSuccess Checkmark サクセスチェック
Animated checkmark drawn to indicate successful completion. 完了時に描画されるアニメーションチェックマーク。
View DetailsAI Generating Text Loader AIテキストローダー
Each letter glows and fades in one by one as a chromatic scan sweeps behind — perfect for AI generation states. 文字が1つずつグロー発光しながらフェードインし、クロマティックな光のスキャンが背後を走るAI生成風ローダー。
View DetailsSliding Underline Tabs スライド下線タブ
A minimal tab navigation where the underline indicator glides to the active item. アクティブタブに合わせて下線インジケーターが滑らかに移動するシンプルなタブナビゲーション。
View DetailsStepper Dot Progress ドットステップナビ
A multi-step progress component using dots and a connecting line that animates to the active step. 複数ステップの進捗をドットとラインで可視化し、アクティブインジケーターが滑らかに切り替わるステッパーUI。
View DetailsDropdown Menu ドロップダウンメニュー
Dropdown menus that expand on click or hover with adjustable animation speed and direction. クリックまたはホバーで展開するドロップダウンメニュー。アニメーション速度と方向を調整できます。
View DetailsBreadcrumb Navigation ブレッドクラムナビゲーション
Breadcrumb navigation showing hierarchical structure. Customize separators and hover effects. 階層構造を表示するパンくずリストナビゲーション。セパレーターとホバーエフェクトをカスタマイズできます。
View DetailsPagination ページネーション
Pagination component displaying page numbers. Customize active page highlight and hover effects. ページ番号を表示するページネーションコンポーネント。アクティブページのハイライトとホバーエフェクトをカスタマイズできます。
View DetailsBack to Top トップへ戻る
Button that appears on scroll and smoothly scrolls back to top on click. スクロール時に表示され、クリックでページトップへスムーズに戻るボタン。
View DetailsFloating Action Button フローティングアクションボタン
Floating action button at corner. Scale on hover. 画面隅に浮かぶアクションボタン。ホバーで拡大。
View DetailsSidebar Navigation サイドバーナビ
Collapsible sidebar navigation suitable for admin dashboards. 折りたたみ可能なサイドバーナビゲーション。
View DetailsHamburger Menu ハンバーガーメニュー
Mobile-friendly fullscreen menu with animated toggle icon. モバイル向けフルスクリーンメニューとアニメーションアイコン。
View DetailsCommand Palette コマンドパレット
Keyboard-first command palette that opens with Ctrl or Cmd + K and filters actions in a modal list. Ctrl / Cmd + K で開き、モーダル内のアクションを絞り込めるキーボード優先のコマンドパレット。
View DetailsModal Animation モーダルアニメーション
Modal that fades in and scales up. Adjust animation speed and direction. フェードインとスケールで表示されるモーダル。アニメーション速度と方向を調整できます。
View DetailsButton Ripple Effect ボタンリップルエフェクト
Ripple effect that expands from click position. Adjust ripple size and speed. ボタンクリック時に波紋が広がるリップルエフェクト。波紋のサイズと速度を調整できます。
View DetailsCard Flip カードフリップ
3D card flip animation on click or hover. Adjust rotation axis and speed. カードをクリックまたはホバーで裏返すフリップアニメーション。回転軸と速度を調整できます。
View DetailsTooltip ツールチップ
Tooltip that appears on hover. Customize position, animation, and styling. ホバー時に表示されるツールチップ。位置、アニメーション、スタイルをカスタマイズできます。
View DetailsAccordion アコーディオン
Accordion that expands and collapses on click. Customize animation speed and styling. クリックで展開/折りたたみができるアコーディオン。アニメーション速度とスタイルをカスタマイズできます。
View DetailsToggle Switch トグルスイッチ
ON/OFF toggle switch. collect UI-style pattern. ON/OFF を切り替えるトグルスイッチ。collect UI 系のパターン。
View DetailsDrag & Drop List ドラッグ＆ドロップリスト
Sortable list interface using drag and drop interactions. 項目の並べ替えが可能なドラッグ＆ドロップリスト。
View DetailsImage Carousel 画像カルーセル
Basic image slider with manual navigation controls. スワイプやボタンで画像を切り替える基本的なスライダー。
View DetailsCopy to Clipboard コピーボタン
Button that copies text to clipboard and shows feedback. クリックでテキストをコピーし、フィードバックを表示するボタン。
View DetailsCookie Consent Banner Cookie コンセントバナー
GDPR-style cookie consent banner that slides in from the bottom on first visit with Accept/Decline actions. 初回訪問時にスライドインするGDPRスタイルのCookieコンセントバナー。Accept/Declineの操作で非表示に。
View DetailsLoad More Button ロードモアボタン
Reveals the next batch of items with a fade-slide-up animation. Shows remaining count and a loading spinner. クリックで次バッチをフェードインで追加表示するロードモアボタン。残件数表示とスピナー付き。
View DetailsFloating Label Input フローティングラベル入力
Material Design-style input where the label floats up on focus. フォーカス時にラベルが上部に移動するマテリアルデザイン風の入力フィールド。
View DetailsCustom Select Dropdown カスタムセレクト
Fully styleable custom select box with animated dropdown options. スタイリング可能なカスタムセレクトボックス。アニメーション付きのドロップダウン。
View DetailsCheckbox & Radio Buttons チェックボックス＆ラジオ
Animated custom checkboxes and radio buttons. アニメーションするカスタムチェックボックスとラジオボタン。
View DetailsInput Validation States バリデーションステート
Visual feedback patterns for input success and error states. 入力内容の成功・エラー状態を視覚的にフィードバックするパターン。
View DetailsSearch with Suggestions サジェスト検索
Autocomplete search box that displays a suggestion list while typing. 入力中に候補リストを表示するオートコンプリート検索ボックス。
View DetailsTextarea Character Counter 文字数カウンター付きテキストエリア
Keep notes within a character budget without cutting off pasted text or Japanese input. 貼り付けた文章や日本語入力を切り捨てず、文字数の目安と超過状態を確認できます。
View DetailsQuantity Stepper 数量ステッパー
Choose a quantity with buttons, direct input, or native arrow keys, with clear feedback at every boundary. ボタン・直接入力・上下キーで数量を選択し、上下限や入力エラーを確認できます。
View DetailsForm Error Summary フォームエラーサマリー
Validate on submit, focus a concise error summary, and keep every message connected to its field. 送信時に検証し、エラーサマリーへフォーカスを移動。各メッセージを入力項目と関連付けます。
View DetailsFile Upload Dropzone ファイルアップロードドロップゾーン
Accept files by drag-and-drop or click, validate type and size, and animate a per-file upload progress bar. ドラッグ&ドロップまたはクリックでファイルを受け付け、種類とサイズを検証してファイルごとの進捗バーを表示します。
View DetailsStar Rating Input 星評価入力
A keyboard-accessible star rating input filled entirely with the CSS general sibling selector, no JavaScript required for the visual state. JavaScriptなしでCSSの一般兄弟セレクタだけで塗りつぶす、キーボード操作可能な星評価入力。
View DetailsSplit Hero Panel スプリットヒーローパネル
A split hero layout that separates copy and preview panels with a customizable column ratio. コピーとプレビューを左右に分けるヒーローレイアウト。カラム比率をカスタムプロパティで柔軟に変更できます。
View DetailsLayered Card Stack カードスタックレイアウト
Stacked cards that float on hover with offsets controlled by a custom property. ずらしたカードを重ねてホバー時に浮かせるレイアウト。カスタムプロパティでオフセット量を調整できます。
View DetailsParallax Scroll パララックススクロール
Background moves slower than foreground on scroll, creating depth. Adjust speed ratio. スクロールに応じて背景と前景が異なる速度で動くパララックス効果。速度比を調整できます。
View DetailsMasonry Layout マーソンリーレイアウト
Masonry layout for cards with varying heights. Implemented using CSS Grid with customizable columns and gap. 不均等な高さのカードを配置するマーソンリーレイアウト。CSS Gridを使用して実装し、カラム数とギャップをカスタマイズできます。
View DetailsSticky Header スティッキーヘッダー
Sticky header that remains fixed at the top when scrolling. Customize background opacity and shadow. スクロール時に画面上部に固定表示されるスティッキーヘッダー。背景の透明度と影をカスタマイズできます。
View DetailsFooter Layout フッターレイアウト
Responsive footer with multi-column links and copyright notice. マルチカラムのリンクと著作権表示を含むレスポンシブフッター。
View DetailsPricing Card Grid 料金表グリッド
Grid of pricing cards for plan comparison, with highlighted recommended plan. プラン比較のための料金カードグリッド。推奨プランの強調表示付き。
View DetailsCTA Banner Section CTAバナー
CTA section with distinct background and action button. 目立つ背景とアクションボタンを持つCTA（Call To Action）セクション。
View DetailsResponsive Comparison Table レスポンシブ比較表
Compare multiple plans or products row by row in a table that scrolls horizontally on mobile instead of breaking. 複数のプランや製品を項目ごとに比較する表。モバイルではレイアウト崩れの代わりに横スクロールします。
View DetailsVideo Hover Reveal ビデオホバーリビール
A video thumbnail that reveals play controls and metadata on hover. サムネイルにホバーするとプレイボタンとメタ情報が浮き上がる動画プレビューカード。
View DetailsMini Player Dock ミニプレーヤードック
A fixed mini video player dock with thumbnail, metadata, and progress bar. 画面下に固定したミニ動画プレーヤー。サムネイルと進捗バーを1列にまとめたUI。
View DetailsImage Gallery 画像ギャラリー
Grid layout image gallery. Images scale up on hover with overlay reveal. グリッドレイアウトの画像ギャラリー。ホバー時に拡大表示やオーバーレイを表示できます。
View DetailsImage Zoom on Hover 画像ホバーズーム
Image zooms in smoothly on hover. Codrops-style media hover pattern. ホバー時に画像がゆっくりズームするエフェクト。Codrops 系のメディアホバーパターン。
View DetailsBefore/After Comparison ビフォーアフタースライダー
Interactive slider to compare two overlapping images. スライダーを動かして2枚の画像を比較できるUI。
View DetailsAudio Player オーディオプレーヤー
Audio player UI featuring a simulated waveform visualizer. 波形ビジュアライザー風の演出を含むオーディオプレーヤーUI。
View DetailsAccessible Carousel アクセシブルカルーセル
CSS Scroll Snap carousel meeting a11y requirements via inert, prefers-reduced-motion, and aria-live announcements. inert 属性・prefers-reduced-motion・aria-live でアクセシビリティ要件を満たした CSS Scroll Snap カルーセル。
View DetailsAuto Day Night Background 自動デイナイト背景
Switches gradients and icons between day and night based on local time or manual toggles. 時間帯に応じて背景グラデーションとアイコンを切り替えるテーマ演出。
View DetailsMood Gradient Cycle ムードグラデーションサイクル
Cycles mood-based gradients with buttons and a hue-rotate animation. ボタンでムード別グラデーションを切り替え、CSSアニメーションで色相を循環させるテーマ演出。
View DetailsColor Palette Switch カラーパレット切り替え
Theme system that switches color palettes with buttons. Choose from multiple presets. ボタンでカラーパレットを切り替えるテーマシステム。複数のプリセットから選択できます。
View DetailsDark Mode Toggle ダークモード切り替え
Toggle light/dark theme. Smooth transition with CSS variables. ライト/ダークテーマを切り替えるトグル。CSS変数で滑らかに遷移。
View DetailsR-001
Load More Demo Video Template 「Load More」デモ動画テンプレート
Remotion video template auto-playing: button press → loading → card batch → highlight. 1920×1080 / 30fps / 7s. ボタン押下→ローディング→カード追加→ハイライトを自動再生する Remotion 動画テンプレ。1920×1080 / 30fps / 7秒。
View DetailsR-002
Toast Notification Sequence トースト通知シーケンス
Remotion video template: Success / Warning / Error toasts stack in sequence and auto-dismiss. 1920×1080 / 30fps / 8s. Success / Warning / Error の3種トーストが順番にスタックし自動消去される Remotion 動画テンプレ。1920×1080 / 30fps / 8秒。
View DetailsR-003
Dashboard Stats Reveal ダッシュボード統計リビール
Remotion video template: 4 KPI stat cards reveal in staggered sequence with count-up number animations. 1920×1080 / 30fps / 10s. 4枚のKPIカードがスタガーで登場しながら数値がカウントアップするダッシュボード紹介シーンの Remotion 動画テンプレ。1920×1080 / 30fps / 10秒。
View DetailsR-004
Bar Chart Reveal 棒グラフリビール
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. 月次売上の棒グラフが左から1本ずつ伸び上がりながら数値がカウントアップするチャートリビールシーンの Remotion 動画テンプレ。1920×1080 / 30fps / 10秒。
View DetailsR-005
Typing Code Reveal タイピングコードリビール
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. コードが1文字ずつタイプされながら現れるコードエディター風シーンの Remotion 動画テンプレ。シンタックスハイライト・ブリンクカーソル付き。1920×1080 / 30fps / 12秒。
View DetailsWallet Connect Button ウォレット接続ボタン
Connect MetaMask or any EIP-1193 wallet using window.ethereum only. Implements connect, disconnect, address display, and network display — no libraries required. MetaMask など EIP-1193 対応ウォレットを window.ethereum のみで接続。接続・切断・アドレス表示・ネットワーク表示をライブラリ不要で実装。
View DetailsETH Balance Display ETH 残高表示
Fetch and display the connected wallet's ETH balance in real time using ethers.js v6. Supports loading state, refresh button, and network display. ethers.js (v6) で接続済みウォレットの ETH 残高をリアルタイム取得・表示。ローディング状態・リフレッシュ・ネットワーク表示に対応。
View Details