バイブコーディング向けに最適化された軽量なアニメーション＆UIリファレンス。URLを渡すだけでAIに正確な実装を指示できます。
A high-performance animation reference curated for vibe coding. Just share the URL to get precise code from any AI.
Gradient text scrolls horizontally in an infinite loop with speed controlled via a custom property. グラデーションテキストを無限ループで横方向に流し、スピードをカスタムプロパティで制御します。
View DetailsA gradient CTA button breathes with a neon glow whose intensity and speed are adjustable via custom properties. グラデーションCTAが呼吸するように発光し、強度やスピードをカスタムプロパティで調整できます。
View DetailsDescription
Description
Description
Description
Elements fade in while scaling up for entrance animations with staggered delays. 要素がフェードインしながらスケールアップして表示されるエントランスアニメーション。
View DetailsHover to see the lift effect
Hover to see the lift effect
Hover to see the lift effect
Cards lift up on hover with expanded shadows. Adjust lift height and shadow intensity. ホバー時にカードが浮き上がり影が拡大するエフェクト。リフト高さと影の強度を調整できます。
View DetailsBeautiful animation where text slides up word by word from below. Customize reveal speed and word delay. テキストが単語ごとに下からスライドして表示される美しいアニメーション。表示速度と間隔を調整できます。
View DetailsFloating particles in the background. Customize particle count, speed, and colors. 背景に浮遊するパーティクルアニメーション。粒子の数、速度、色をカスタマイズできます。
View DetailsLink with underline that grows from the center on hover. Hover.css-style pattern. ホバー時に下線が中央から左右に伸びるリンクスタイル。Hover.css 系のパターン。
View DetailsShake on error and bounce on success. Animista-style keyframe feedback. エラー時シェイク・成功時バウンスのフィードバックアニメーション。Animista 系のキーフレームパターン。
View DetailsIcon rotates on hover. Hover.css-style pattern. ホバー時にアイコンが回転するエフェクト。Hover.css 系のパターン。
View DetailsEffect where text appears one character at a time like a typewriter. テキストが一文字ずつタイプされるように表示されるエフェクト。
View DetailsAnimation that counts up from zero to a specified number. 指定した数値までゼロからカウントアップするアニメーション。
View DetailsFade in content as it enters viewport
Smooth translation and opacity change
Keep scrolling...
Fade-in effect for elements as they scroll into the viewport. スクロールして画面内に入った要素をフェードインさせるエフェクト。
View DetailsA rotating conic-gradient glow wraps a glassy card with adjustable bloom spread and speed. conic-gradient の虹色グローがカード外周を回転し、発光の広がりと速度を調整できる演出。
View DetailsA WebGL hero background using ridged simplex noise to render deep-green to cyan beams, with mouse-driven drift. Simplexノイズのリッジ発光で、深緑→シアンのビームが流れるWebGL背景。マウスで揺らぎを操作。
View DetailsFive blurred radial-gradient orbs float on CSS keyframes, blending into a vivid mesh — a WebGL-free hero background. 5つのぼかしオーブが CSS keyframes で浮遊し、WebGLなしで生成感のあるメッシュグラデーション背景を実現。
View DetailsShimmering skeleton rows for list-loading states with adjustable speed. リスト読み込み時の骨組み表示をシマーアニメーションで表現するパターン。
View DetailsCSS-only dot wave loader using staggered animation-delay for each dot. Pure CSS, lightweight, highly customizable. 各ドットにanimation-delayをずらすだけでウェーブ効果を実現するCSS専用ローダー。軽量でカスタマイズ性が高い。
View DetailsRotating spinner loader. Adjust rotation speed and size via custom properties. 回転するスピナーローダー。回転速度とサイズをカスタムプロパティで調整できます。
View DetailsProgress bar displaying loading progress. Customize animation speed and colors. 進捗を表示するプログレスバー。アニメーション速度と色をカスタマイズできます。
View DetailsCard-style skeleton loading placeholder. Displays loading state with shimmer animation. カード形式のスケルトンローディング。シマーアニメーションで読み込み状態を表現します。
View DetailsSlide-in notification from the edge. Adjust display duration and animation speed. 画面端からスライドインする一時通知。表示時間とアニメーション速度を調整できます。
View DetailsFullscreen loading overlay with fade. Spinner and message. 画面全体を覆うローディングオーバーレイ。フェード表示。
View DetailsEmpty state UI with illustration and description for zero-data cases. データがない場合に表示するイラスト付きのエンプティステート。
View DetailsAnimated checkmark drawn to indicate successful completion. 完了時に描画されるアニメーションチェックマーク。
View DetailsEach letter glows and fades in one by one as a chromatic scan sweeps behind — perfect for AI generation states. 文字が1つずつグロー発光しながらフェードインし、クロマティックな光のスキャンが背後を走るAI生成風ローダー。
View DetailsA minimal tab navigation where the underline indicator glides to the active item. アクティブタブに合わせて下線インジケーターが滑らかに移動するシンプルなタブナビゲーション。
View DetailsA multi-step progress component using dots and a connecting line that animates to the active step. 複数ステップの進捗をドットとラインで可視化し、アクティブインジケーターが滑らかに切り替わるステッパーUI。
View DetailsDropdown menus that expand on click or hover with adjustable animation speed and direction. クリックまたはホバーで展開するドロップダウンメニュー。アニメーション速度と方向を調整できます。
View DetailsBreadcrumb navigation showing hierarchical structure. Customize separators and hover effects. 階層構造を表示するパンくずリストナビゲーション。セパレーターとホバーエフェクトをカスタマイズできます。
View DetailsPagination component displaying page numbers. Customize active page highlight and hover effects. ページ番号を表示するページネーションコンポーネント。アクティブページのハイライトとホバーエフェクトをカスタマイズできます。
View DetailsButton that appears on scroll and smoothly scrolls back to top on click. スクロール時に表示され、クリックでページトップへスムーズに戻るボタン。
View DetailsFloating action button at corner. Scale on hover. 画面隅に浮かぶアクションボタン。ホバーで拡大。
View DetailsClick the toggle button to collapse/expand the sidebar.
Collapsible sidebar navigation suitable for admin dashboards. 折りたたみ可能なサイドバーナビゲーション。
View DetailsMobile-friendly fullscreen menu with animated toggle icon. モバイル向けフルスクリーンメニューとアニメーションアイコン。
View DetailsKeyboard-first command palette that opens with Ctrl or Cmd + K and filters actions in a modal list. Ctrl / Cmd + K で開き、モーダル内のアクションを絞り込めるキーボード優先のコマンドパレット。
View DetailsModal that fades in and scales up. Adjust animation speed and direction. フェードインとスケールで表示されるモーダル。アニメーション速度と方向を調整できます。
View DetailsRipple effect that expands from click position. Adjust ripple size and speed. ボタンクリック時に波紋が広がるリップルエフェクト。波紋のサイズと速度を調整できます。
View Details3D card flip animation on click or hover. Adjust rotation axis and speed. カードをクリックまたはホバーで裏返すフリップアニメーション。回転軸と速度を調整できます。
View DetailsTooltip that appears on hover. Customize position, animation, and styling. ホバー時に表示されるツールチップ。位置、アニメーション、スタイルをカスタマイズできます。
View DetailsAccordion that expands and collapses on click. Customize animation speed and styling. クリックで展開/折りたたみができるアコーディオン。アニメーション速度とスタイルをカスタマイズできます。
View DetailsON/OFF toggle switch. collect UI-style pattern. ON/OFF を切り替えるトグルスイッチ。collect UI 系のパターン。
View Detailsドラッグして並び替え Drag to reorder
Sortable list interface using drag and drop interactions. 項目の並べ替えが可能なドラッグ＆ドロップリスト。
View DetailsBasic image slider with manual navigation controls. スワイプやボタンで画像を切り替える基本的なスライダー。
View DetailsButton that copies text to clipboard and shows feedback. クリックでテキストをコピーし、フィードバックを表示するボタン。
View DetailsGDPR-style cookie consent banner that slides in from the bottom on first visit with Accept/Decline actions. 初回訪問時にスライドインするGDPRスタイルのCookieコンセントバナー。Accept/Declineの操作で非表示に。
View Detailsすべて表示しました All items loaded
Reveals the next batch of items with a fade-slide-up animation. Shows remaining count and a loading spinner. クリックで次バッチをフェードインで追加表示するロードモアボタン。残件数表示とスピナー付き。
View DetailsMaterial Design-style input where the label floats up on focus. フォーカス時にラベルが上部に移動するマテリアルデザイン風の入力フィールド。
View DetailsFully styleable custom select box with animated dropdown options. スタイリング可能なカスタムセレクトボックス。アニメーション付きのドロップダウン。
View DetailsAnimated custom checkboxes and radio buttons. アニメーションするカスタムチェックボックスとラジオボタン。
View DetailsVisual feedback patterns for input success and error states. 入力内容の成功・エラー状態を視覚的にフィードバックするパターン。
View DetailsAutocomplete search box that displays a suggestion list while typing. 入力中に候補リストを表示するオートコンプリート検索ボックス。
View DetailsA split hero layout that separates copy and preview panels with a customizable column ratio. コピーとプレビューを左右に分けるヒーローレイアウト。カラム比率をカスタムプロパティで柔軟に変更できます。
View DetailsRealtime insights
Shared workflows
Core toolkit
Stacked cards that float on hover with offsets controlled by a custom property. ずらしたカードを重ねてホバー時に浮かせるレイアウト。カスタムプロパティでオフセット量を調整できます。
View DetailsBackground moves slower than the card content.
Background moves slower than foreground on scroll, creating depth. Adjust speed ratio. スクロールに応じて背景と前景が異なる速度で動くパララックス効果。速度比を調整できます。
View DetailsMasonry layout for cards with varying heights. Implemented using CSS Grid with customizable columns and gap. 不均等な高さのカードを配置するマーソンリーレイアウト。CSS Gridを使用して実装し、カラム数とギャップをカスタマイズできます。
View DetailsCompact sticky navigation for long pages.
Keep key links pinned while content moves.
Useful for docs, pricing, and landing pages.
Background and shadow can react to scroll.
Sticky header that remains fixed at the top when scrolling. Customize background opacity and shadow. スクロール時に画面上部に固定表示されるスティッキーヘッダー。背景の透明度と影をカスタマイズできます。
View DetailsResponsive footer with multi-column links and copyright notice. マルチカラムのリンクと著作権表示を含むレスポンシブフッター。
View Details1 User
5 Users
Unlimited
Grid of pricing cards for plan comparison, with highlighted recommended plan. プラン比較のための料金カードグリッド。推奨プランの強調表示付き。
View DetailsCTA section with distinct background and action button. 目立つ背景とアクションボタンを持つCTA（Call To Action）セクション。
View Details
A video thumbnail that reveals play controls and metadata on hover. サムネイルにホバーするとプレイボタンとメタ情報が浮き上がる動画プレビューカード。
View DetailsMini player dock slides in while content stays visible.
A fixed mini video player dock with thumbnail, metadata, and progress bar. 画面下に固定したミニ動画プレーヤー。サムネイルと進捗バーを1列にまとめたUI。
View Details
Grid layout image gallery. Images scale up on hover with overlay reveal. グリッドレイアウトの画像ギャラリー。ホバー時に拡大表示やオーバーレイを表示できます。
View DetailsImage zooms in smoothly on hover. Codrops-style media hover pattern. ホバー時に画像がゆっくりズームするエフェクト。Codrops 系のメディアホバーパターン。
View DetailsInteractive slider to compare two overlapping images. スライダーを動かして2枚の画像を比較できるUI。
View DetailsAudio player UI featuring a simulated waveform visualizer. 波形ビジュアライザー風の演出を含むオーディオプレーヤーUI。
View DetailsInactive slides stay out of the tab order.
Prev and next keep the flow predictable.
Cards align cleanly without autoplay chaos.
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 DetailsSwitches gradients and icons between day and night based on local time or manual toggles. 時間帯に応じて背景グラデーションとアイコンを切り替えるテーマ演出。
View DetailsSoothing colors for relaxation
Cycles mood-based gradients with buttons and a hue-rotate animation. ボタンでムード別グラデーションを切り替え、CSSアニメーションで色相を循環させるテーマ演出。
View DetailsTheme system that switches color palettes with buttons. Choose from multiple presets. ボタンでカラーパレットを切り替えるテーマシステム。複数のプリセットから選択できます。
View DetailsToggle light/dark theme. Smooth transition with CSS variables. ライト/ダークテーマを切り替えるトグル。CSS変数で滑らかに遷移。
View Details
Remotion video template auto-playing: button press → loading → card batch → highlight. 1920×1080 / 30fps / 7s. ボタン押下→ローディング→カード追加→ハイライトを自動再生する Remotion 動画テンプレ。1920×1080 / 30fps / 7秒。
View Details
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 Details
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 Details
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 Details
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 DetailsConnect 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 DetailsFetch 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