https://motion.luvisyouth.com/ コピペで使える Web アニメーション 199 種のカタログ。新しく追加されたエフェクトを配信します。 ja Sat, 26 Sep 2026 00:00:00 +0900 https://motion.luvisyouth.com/effects/customizable-select https://motion.luvisyouth.com/effects/customizable-select Sat, 26 Sep 2026 00:00:00 +0900 micro Customizable Select — base-select で select をアイコン付きに。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/interpolate-size-height-auto https://motion.luvisyouth.com/effects/interpolate-size-height-auto Sat, 26 Sep 2026 00:00:00 +0900 transition Height Auto Transition — height: auto へ滑らかに開閉。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/corner-shape-squircle https://motion.luvisyouth.com/effects/corner-shape-squircle Sat, 26 Sep 2026 00:00:00 +0900 button Corner Shape — squircle・scoop・notch に角の形が変わる。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/css-custom-function https://motion.luvisyouth.com/effects/css-custom-function Sat, 26 Sep 2026 00:00:00 +0900 card CSS Custom Function — @function で影の深さを計算するカード。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/css-if-variants https://motion.luvisyouth.com/effects/css-if-variants Sat, 26 Sep 2026 00:00:00 +0900 button CSS if() Variants — 変数1つでボタンの種類を切り替える。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/css-scroll-carousel https://motion.luvisyouth.com/effects/css-scroll-carousel Sat, 26 Sep 2026 00:00:00 +0900 scroll CSS Scroll Carousel — JSなしで送りボタンと現在地の印。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/sibling-index-spinner https://motion.luvisyouth.com/effects/sibling-index-spinner Sat, 26 Sep 2026 00:00:00 +0900 loading Sibling Index Spinner — sibling-index() で並べる点のスピナー。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/css-shape-morph https://motion.luvisyouth.com/effects/css-shape-morph Sat, 26 Sep 2026 00:00:00 +0900 card CSS Shape Morph — shape() でカードの縁を波からアーチへ変形。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/text-box-trim https://motion.luvisyouth.com/effects/text-box-trim Sat, 26 Sep 2026 00:00:00 +0900 text Text Box Trim — 文字の上下の余白を削って真ん中に揃える。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/dialog-light-dismiss https://motion.luvisyouth.com/effects/dialog-light-dismiss Sat, 26 Sep 2026 00:00:00 +0900 modal Dialog Light Dismiss — closedby で外側クリックの閉じ方を選ぶ。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/invoker-commands https://motion.luvisyouth.com/effects/invoker-commands Sat, 26 Sep 2026 00:00:00 +0900 modal Invoker Commands — commandfor でダイアログを JS なしで開閉。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/field-sizing-auto-grow https://motion.luvisyouth.com/effects/field-sizing-auto-grow Sat, 26 Sep 2026 00:00:00 +0900 micro Auto-Grow Textarea — field-sizing で入力に合わせて伸びる欄。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/scroll-spy-toc https://motion.luvisyouth.com/effects/scroll-spy-toc Sat, 26 Sep 2026 00:00:00 +0900 scroll Scroll Spy — 読んでいる見出しを目次で追いかける。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/drag-to-scroll https://motion.luvisyouth.com/effects/drag-to-scroll Sat, 26 Sep 2026 00:00:00 +0900 scroll Drag to Scroll — マウスでつかんで横に流せるカードの列。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/range-slider-bubble https://motion.luvisyouth.com/effects/range-slider-bubble Sat, 26 Sep 2026 00:00:00 +0900 micro Range Slider Bubble — つまみの上に数値の吹き出しが付くスライダー。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/alert-dialog-shake https://motion.luvisyouth.com/effects/alert-dialog-shake Sat, 26 Sep 2026 00:00:00 +0900 modal Alert Dialog Shake — 外側を押すと揺れて知らせる確認ダイアログ。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/fullscreen-menu-overlay https://motion.luvisyouth.com/effects/fullscreen-menu-overlay Sat, 26 Sep 2026 00:00:00 +0900 modal Fullscreen Menu — 画面全体を覆うメニューが上から降りてくる。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/context-menu https://motion.luvisyouth.com/effects/context-menu Sat, 26 Sep 2026 00:00:00 +0900 modal Context Menu — 右クリックした場所に開く独自メニュー。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/pull-to-refresh https://motion.luvisyouth.com/effects/pull-to-refresh Sat, 26 Sep 2026 00:00:00 +0900 loading Pull to Refresh — 一覧を下へ引っ張って離すと更新。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/top-loading-bar https://motion.luvisyouth.com/effects/top-loading-bar Sat, 26 Sep 2026 00:00:00 +0900 loading Top Loading Bar — 画面の上端を細いバーが伸びる読み込み表示。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/direction-aware-tabs https://motion.luvisyouth.com/effects/direction-aware-tabs Sat, 26 Sep 2026 00:00:00 +0900 transition Direction-aware Tabs — 選んだ向きから中身がすべり込むタブ。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/flip-list-reorder https://motion.luvisyouth.com/effects/flip-list-reorder Sat, 26 Sep 2026 00:00:00 +0900 transition FLIP List Reorder — 並べ替えたカードが新しい位置へすべる。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/click-spark https://motion.luvisyouth.com/effects/click-spark Sat, 26 Sep 2026 00:00:00 +0900 cursor Click Spark — 押した場所から火花が8方向に散る。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/image-trail https://motion.luvisyouth.com/effects/image-trail Sat, 26 Sep 2026 00:00:00 +0900 cursor Image Trail — マウスの通り道に画像が次々と現れて消える。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/tracing-beam https://motion.luvisyouth.com/effects/tracing-beam Sat, 26 Sep 2026 00:00:00 +0900 scroll Tracing Beam — スクロールに合わせて伸びるタイムラインの光。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/line-shadow-text https://motion.luvisyouth.com/effects/line-shadow-text Sat, 26 Sep 2026 00:00:00 +0900 text Line Shadow Text — 斜線の影がゆっくり流れる見出し。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/interactive-hover-button https://motion.luvisyouth.com/effects/interactive-hover-button Sat, 26 Sep 2026 00:00:00 +0900 button Interactive Hover Button — 点が広がって矢印が現れるボタン。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/hold-to-confirm-button https://motion.luvisyouth.com/effects/hold-to-confirm-button Sat, 26 Sep 2026 00:00:00 +0900 button Hold to Confirm — 長押しで実行する削除ボタン。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/ping-status-dot https://motion.luvisyouth.com/effects/ping-status-dot Sat, 26 Sep 2026 00:00:00 +0900 micro Ping Status Dot — 波紋が広がるオンライン・LIVE表示の点。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/indeterminate-progress https://motion.luvisyouth.com/effects/indeterminate-progress Sat, 26 Sep 2026 00:00:00 +0900 loading Indeterminate Progress — 進み具合が分からない時の流れるバー。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/conic-spinner https://motion.luvisyouth.com/effects/conic-spinner Sat, 26 Sep 2026 00:00:00 +0900 loading Conic Spinner — conic-gradient で作るCSSだけのスピナー3種。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/multi-step-loader https://motion.luvisyouth.com/effects/multi-step-loader Sat, 26 Sep 2026 00:00:00 +0900 loading Multi Step Loader — 処理の段階を1つずつ見せる読み込み表示。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/circle-reveal-theme-toggle https://motion.luvisyouth.com/effects/circle-reveal-theme-toggle Sat, 26 Sep 2026 00:00:00 +0900 transition Theme Toggle — 押した場所から円が広がりダークモードへ。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/lens-magnifier https://motion.luvisyouth.com/effects/lens-magnifier Sat, 26 Sep 2026 00:00:00 +0900 cursor Lens — マウスを乗せた場所を丸いルーペで拡大表示。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/following-pointer https://motion.luvisyouth.com/effects/following-pointer Sat, 26 Sep 2026 00:00:00 +0900 cursor Following Pointer — 名前ラベル付きの矢印がカードの上で追従。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/smooth-cursor https://motion.luvisyouth.com/effects/smooth-cursor Sat, 26 Sep 2026 00:00:00 +0900 cursor Smooth Cursor — ばねの動きで追いかける矢印カーソル。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/scroll-velocity-text https://motion.luvisyouth.com/effects/scroll-velocity-text Sat, 26 Sep 2026 00:00:00 +0900 scroll Scroll Velocity — スクロールの速さで流れが加速する文字帯。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/swipe-to-dismiss-card https://motion.luvisyouth.com/effects/swipe-to-dismiss-card Sat, 26 Sep 2026 00:00:00 +0900 card Swipe to Dismiss — 横にスワイプして消せる通知カード。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/pricing-toggle-card https://motion.luvisyouth.com/effects/pricing-toggle-card Sat, 26 Sep 2026 00:00:00 +0900 card Pricing Toggle — 月額と年額を切り替える料金カード。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/lightbox-gallery https://motion.luvisyouth.com/effects/lightbox-gallery Sat, 26 Sep 2026 00:00:00 +0900 modal Lightbox — 画像を拡大表示して前後に送るギャラリー。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/typing-indicator https://motion.luvisyouth.com/effects/typing-indicator Sat, 26 Sep 2026 00:00:00 +0900 loading Typing Indicator — チャットの「入力中…」3点アニメーション。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/stepper-progress https://motion.luvisyouth.com/effects/stepper-progress Sat, 26 Sep 2026 00:00:00 +0900 micro Stepper — 手続きの何段目かを示すステップ表示。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/otp-input https://motion.luvisyouth.com/effects/otp-input Sat, 26 Sep 2026 00:00:00 +0900 micro OTP Input — 自動で次へ進む6桁の認証コード入力欄。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/password-strength-meter https://motion.luvisyouth.com/effects/password-strength-meter Sat, 26 Sep 2026 00:00:00 +0900 micro Password Strength — 入力に合わせて伸びる強度メーター。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/download-progress-button https://motion.luvisyouth.com/effects/download-progress-button Sat, 26 Sep 2026 00:00:00 +0900 button Download Button — 押すと進捗バーになり完了を示すボタン。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/pulsating-button https://motion.luvisyouth.com/effects/pulsating-button Sat, 26 Sep 2026 00:00:00 +0900 button Pulsating Button — 波紋が広がり続けて目を引くボタン。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/spinning-text https://motion.luvisyouth.com/effects/spinning-text Sat, 26 Sep 2026 00:00:00 +0900 text Spinning Text — 円形に並んだ文字がゆっくり回転する。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/sparkles-text https://motion.luvisyouth.com/effects/sparkles-text Sat, 26 Sep 2026 00:00:00 +0900 text Sparkles Text — 文字のまわりで星がきらめく見出し。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/expandable-card https://motion.luvisyouth.com/effects/expandable-card Sat, 26 Sep 2026 00:00:00 +0900 card Expandable Card — 押したカードがその場で詳細に広がる。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/moving-border-button https://motion.luvisyouth.com/effects/moving-border-button Sat, 26 Sep 2026 00:00:00 +0900 button Moving Border — 光が縁を一周するボタン（@property）。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/rainbow-button https://motion.luvisyouth.com/effects/rainbow-button Sat, 26 Sep 2026 00:00:00 +0900 button Rainbow Button — 虹色グラデーションが流れるボタン。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/marker-highlight-text https://motion.luvisyouth.com/effects/marker-highlight-text Sat, 26 Sep 2026 00:00:00 +0900 text 蛍光ペン風マーカー — スクロールで引かれるCSSハイライト。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/morphing-text https://motion.luvisyouth.com/effects/morphing-text Sat, 26 Sep 2026 00:00:00 +0900 text Morphing Text — 文字が溶けて次の単語に変わるモーフィング。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/text-generate-effect https://motion.luvisyouth.com/effects/text-generate-effect Sat, 26 Sep 2026 00:00:00 +0900 text Text Generate Effect — 単語がぼかしから浮かぶ文章表示。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/header-shrink-on-scroll https://motion.luvisyouth.com/effects/header-shrink-on-scroll Sat, 26 Sep 2026 00:00:00 +0900 scroll Shrinking Header — スクロールで縮むヘッダーの実装。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/back-to-top-button https://motion.luvisyouth.com/effects/back-to-top-button Sat, 26 Sep 2026 00:00:00 +0900 scroll Back to Top — 進捗リング付きのページトップへ戻るボタン。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/scroll-snap-sections https://motion.luvisyouth.com/effects/scroll-snap-sections Sat, 26 Sep 2026 00:00:00 +0900 scroll Scroll Snap — CSSだけでセクション単位に止まるスクロール。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/command-palette https://motion.luvisyouth.com/effects/command-palette Sat, 26 Sep 2026 00:00:00 +0900 modal Command Palette — ⌘K で開くコマンドパレットの実装。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/copy-button-feedback https://motion.luvisyouth.com/effects/copy-button-feedback Sat, 26 Sep 2026 00:00:00 +0900 micro Copy Button — コピー完了が伝わるクリップボードボタン。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/floating-label-input https://motion.luvisyouth.com/effects/floating-label-input Sat, 26 Sep 2026 00:00:00 +0900 micro Floating Label — CSSだけで作るフローティングラベル入力欄。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/morphing-blob-button https://motion.luvisyouth.com/effects/morphing-blob-button Sat, 22 Aug 2026 00:00:00 +0900 button Morphing Blob Button — 有機的に形が変わるボタン。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/swipe-carousel https://motion.luvisyouth.com/effects/swipe-carousel Sat, 22 Aug 2026 00:00:00 +0900 scroll Swipe Carousel — scroll-snapだけのカルーセル実装。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/elastic-tab-indicator https://motion.luvisyouth.com/effects/elastic-tab-indicator Sat, 22 Aug 2026 00:00:00 +0900 micro Elastic Tab Indicator — 伸びて追従するタブ実装。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/card-3d-pin https://motion.luvisyouth.com/effects/card-3d-pin Sat, 22 Aug 2026 00:00:00 +0900 card 3D Pin Card — ホバーで奥へ倒れるカード実装。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/text-scroll-highlight https://motion.luvisyouth.com/effects/text-scroll-highlight Sat, 22 Aug 2026 00:00:00 +0900 text Text Scroll Highlight — スクロールで語が濃くなる実装。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/grain-noise-overlay https://motion.luvisyouth.com/effects/grain-noise-overlay Sat, 22 Aug 2026 00:00:00 +0900 background Grain Noise Overlay — SVGノイズ質感の実装+AIプロンプト。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/progressive-blur https://motion.luvisyouth.com/effects/progressive-blur Sat, 22 Aug 2026 00:00:00 +0900 background Progressive Blur — 段階的にぼけるCSS実装+AIプロンプト。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/before-after-slider https://motion.luvisyouth.com/effects/before-after-slider Sat, 22 Aug 2026 00:00:00 +0900 card Before After Slider — 画像比較スライダー実装+AIプロンプト。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/infinite-moving-cards https://motion.luvisyouth.com/effects/infinite-moving-cards Sat, 22 Aug 2026 00:00:00 +0900 scroll Infinite Moving Cards — 無限に流れる推薦カード実装。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/lamp-glow-heading https://motion.luvisyouth.com/effects/lamp-glow-heading Sat, 22 Aug 2026 00:00:00 +0900 text Lamp Effect — 上から光が降る見出し演出の実装。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/macos-dock https://motion.luvisyouth.com/effects/macos-dock Sat, 22 Aug 2026 00:00:00 +0900 micro macOS Dock — カーソル追従で拡大するドック実装。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/animated-list https://motion.luvisyouth.com/effects/animated-list Sat, 22 Aug 2026 00:00:00 +0900 micro Animated List — 通知が積み上がるリスト実装。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/blur-fade-in https://motion.luvisyouth.com/effects/blur-fade-in Sat, 22 Aug 2026 00:00:00 +0900 transition Blur Fade In — ぼかし解除で出現するCSS実装。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/animated-shiny-text https://motion.luvisyouth.com/effects/animated-shiny-text Sat, 22 Aug 2026 00:00:00 +0900 text Animated Shiny Text — 文字を光が通るCSS実装+AIプロンプト。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/ripple-background https://motion.luvisyouth.com/effects/ripple-background Sat, 22 Aug 2026 00:00:00 +0900 background Ripple Background — CSS同心円パルス背景の実装。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/meteor-shower https://motion.luvisyouth.com/effects/meteor-shower Sat, 22 Aug 2026 00:00:00 +0900 background Meteor Shower — CSS流れ星背景の実装+AIプロンプト。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/has-selector-hover https://motion.luvisyouth.com/effects/has-selector-hover Sat, 22 Aug 2026 00:00:00 +0900 hover :has() ホバー — 兄弟要素を沈ませる実装+AIプロンプト。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/variable-font-morph https://motion.luvisyouth.com/effects/variable-font-morph Sat, 22 Aug 2026 00:00:00 +0900 text Variable Font Morph — 可変フォントのアニメーション実装。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/offset-path-motion https://motion.luvisyouth.com/effects/offset-path-motion Sat, 22 Aug 2026 00:00:00 +0900 svg Offset Path — CSSで曲線パス上を動かす実装。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/anchor-positioning-tooltip https://motion.luvisyouth.com/effects/anchor-positioning-tooltip Sat, 22 Aug 2026 00:00:00 +0900 micro CSS Anchor Positioning — 追従ツールチップ実装。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/popover-api-menu https://motion.luvisyouth.com/effects/popover-api-menu Sat, 22 Aug 2026 00:00:00 +0900 modal Popover API — JSなしポップオーバー実装+AIプロンプト。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/starting-style-fade https://motion.luvisyouth.com/effects/starting-style-fade Sat, 22 Aug 2026 00:00:00 +0900 transition @starting-style — display:none からのフェード実装。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/scroll-reveal-view-timeline https://motion.luvisyouth.com/effects/scroll-reveal-view-timeline Sat, 22 Aug 2026 00:00:00 +0900 scroll Scroll Reveal — animation-timeline: view() 実装+AIプロンプト。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/scroll-driven-progress https://motion.luvisyouth.com/effects/scroll-driven-progress Sat, 22 Aug 2026 00:00:00 +0900 scroll Scroll Driven Progress — CSSだけの読了バー実装+AIプロンプト。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/liquid-glass-card https://motion.luvisyouth.com/effects/liquid-glass-card Thu, 06 Aug 2026 00:00:00 +0900 card Liquid Glass Card — CSSリキッドガラス実装+AIプロンプト。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/logo-marquee https://motion.luvisyouth.com/effects/logo-marquee Thu, 06 Aug 2026 00:00:00 +0900 scroll Logo Marquee — 無限ロゴスライダーCSS実装+AIプロンプト。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/retro-grid-background https://motion.luvisyouth.com/effects/retro-grid-background Thu, 06 Aug 2026 00:00:00 +0900 background Retro Grid Background — CSSレトログリッド背景+AIプロンプト。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/dot-pattern-background https://motion.luvisyouth.com/effects/dot-pattern-background Thu, 06 Aug 2026 00:00:00 +0900 background Dot Pattern Background — CSSドット背景実装+AIプロンプト。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/orbiting-circles https://motion.luvisyouth.com/effects/orbiting-circles Thu, 06 Aug 2026 00:00:00 +0900 background Orbiting Circles — CSS軌道アニメーション実装+AIプロンプト。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/shimmer-button https://motion.luvisyouth.com/effects/shimmer-button Thu, 06 Aug 2026 00:00:00 +0900 button Shimmer Button — CSSシマーボタン実装+AIプロンプト。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/gsap-timeline-sequence https://motion.luvisyouth.com/effects/gsap-timeline-sequence Thu, 06 Aug 2026 00:00:00 +0900 text GSAP Timeline Sequence — 時系列アニメーション実装+AIプロンプト。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/gsap-horizontal-scroll https://motion.luvisyouth.com/effects/gsap-horizontal-scroll Thu, 06 Aug 2026 00:00:00 +0900 scroll GSAP Horizontal Scroll — 横スクロール実装+AIプロンプト。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/gsap-pin-section https://motion.luvisyouth.com/effects/gsap-pin-section Thu, 06 Aug 2026 00:00:00 +0900 scroll GSAP ScrollTrigger Pin — 固定セクション実装+AIプロンプト。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/framer-page-transition https://motion.luvisyouth.com/effects/framer-page-transition Thu, 06 Aug 2026 00:00:00 +0900 transition Framer Motion Page Transition — 実装例+AIプロンプト。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/framer-modal https://motion.luvisyouth.com/effects/framer-modal Thu, 06 Aug 2026 00:00:00 +0900 modal Framer Motion Modal — 開閉アニメーション実装+AIプロンプト。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/framer-layout-animation https://motion.luvisyouth.com/effects/framer-layout-animation Thu, 06 Aug 2026 00:00:00 +0900 card Framer Motion Layout Animation — 実装例+AIプロンプト。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/aurora-card https://motion.luvisyouth.com/effects/aurora-card Thu, 16 Jul 2026 00:00:00 +0900 card Aurora Card — CSS Effect with AI Prompt。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/aurora-button https://motion.luvisyouth.com/effects/aurora-button Thu, 16 Jul 2026 00:00:00 +0900 button Aurora Button — CSS Effect with AI Prompt。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/aurora-text https://motion.luvisyouth.com/effects/aurora-text Thu, 16 Jul 2026 00:00:00 +0900 text Aurora Text — CSS Effect with AI Prompt。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/expanding-search https://motion.luvisyouth.com/effects/expanding-search Wed, 03 Jun 2026 00:00:00 +0900 micro Expanding Search — CSS+JS Effect with AI Prompt。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/svg-blob-rotate https://motion.luvisyouth.com/effects/svg-blob-rotate Wed, 03 Jun 2026 00:00:00 +0900 svg SVG Blob Rotate — CSS+SVG Effect with AI Prompt。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/segmented-control https://motion.luvisyouth.com/effects/segmented-control Wed, 03 Jun 2026 00:00:00 +0900 micro Segmented Control — CSS+JS Effect with AI Prompt。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/glow-pulse-text https://motion.luvisyouth.com/effects/glow-pulse-text Wed, 03 Jun 2026 00:00:00 +0900 text Glow Pulse Text — CSS Effect with AI Prompt。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/flip-counter https://motion.luvisyouth.com/effects/flip-counter Wed, 03 Jun 2026 00:00:00 +0900 micro Flip Counter — CSS+JS Effect with AI Prompt。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/card-spotlight https://motion.luvisyouth.com/effects/card-spotlight Wed, 03 Jun 2026 00:00:00 +0900 card Card Spotlight — CSS+JS Effect with AI Prompt。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/gradient-flow-text https://motion.luvisyouth.com/effects/gradient-flow-text Wed, 03 Jun 2026 00:00:00 +0900 text Gradient Flow Text — CSS Effect with AI Prompt。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/neon-flicker-text https://motion.luvisyouth.com/effects/neon-flicker-text Wed, 03 Jun 2026 00:00:00 +0900 text Neon Flicker Text — ネオンサイン風に明滅する見出しCSS｜Motion Lab。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/badge-bounce https://motion.luvisyouth.com/effects/badge-bounce Wed, 03 Jun 2026 00:00:00 +0900 micro Badge Bounce — CSS+JS Effect with AI Prompt。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/confetti-burst https://motion.luvisyouth.com/effects/confetti-burst Wed, 03 Jun 2026 00:00:00 +0900 micro Confetti Burst — JS Effect with AI Prompt。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/scroll-progress-bar https://motion.luvisyouth.com/effects/scroll-progress-bar Wed, 03 Jun 2026 00:00:00 +0900 scroll Scroll Progress Bar — JS Effect with AI Prompt。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/tailwind-toggle https://motion.luvisyouth.com/effects/tailwind-toggle Wed, 03 Jun 2026 00:00:00 +0900 micro Tailwind Toggle Switch — peerでトグルスイッチを作る。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/framer-stagger-list https://motion.luvisyouth.com/effects/framer-stagger-list Wed, 03 Jun 2026 00:00:00 +0900 card Framer Stagger List — 項目が時間差で現れるエントランス｜Motion Lab。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/framer-drag https://motion.luvisyouth.com/effects/framer-drag Wed, 03 Jun 2026 00:00:00 +0900 micro Framer Drag — CSS+JS+FRAMER Effect with AI Prompt。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/gsap-counter https://motion.luvisyouth.com/effects/gsap-counter Wed, 03 Jun 2026 00:00:00 +0900 micro GSAP Counter — 数値が滑らかにカウントアップする統計表示｜Motion Lab。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/gsap-parallax-scroll https://motion.luvisyouth.com/effects/gsap-parallax-scroll Wed, 03 Jun 2026 00:00:00 +0900 scroll GSAP Parallax — ScrollTriggerのscrubで視差スクロールを実装。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/bar-loader https://motion.luvisyouth.com/effects/bar-loader Wed, 03 Jun 2026 00:00:00 +0900 loading Bar Loader — CSS Effect with AI Prompt。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/rotating-words https://motion.luvisyouth.com/effects/rotating-words Wed, 03 Jun 2026 00:00:00 +0900 text Rotating Words — CSS+JS Effect with AI Prompt。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/underline-slide-hover https://motion.luvisyouth.com/effects/underline-slide-hover Wed, 03 Jun 2026 00:00:00 +0900 hover Underline Slide Hover — CSS Effect with AI Prompt。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/button-3d-press https://motion.luvisyouth.com/effects/button-3d-press Wed, 03 Jun 2026 00:00:00 +0900 button Button 3D Press — CSS Effect with AI Prompt。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。 https://motion.luvisyouth.com/effects/tailwind-pulse-cta https://motion.luvisyouth.com/effects/tailwind-pulse-cta Wed, 03 Jun 2026 00:00:00 +0900 button Tailwind Pulse CTA — CSS+TAILWIND Effect with AI Prompt。動くデモ・コピーできるHTML/CSS/JS・Claude/Cursor/v0 用AIプロンプト付き。