https://design-layer.com/ja/components/brand-bar-header https://design-layer.com/catalog-previews/brand-bar-header.jpg ブランドバーヘッダー フル幅バー型のサイトヘッダー。左にブランド、中央にナビ、右にアクセント CTA を置いたダークテーマの完成パーツです。SaaS やプロダクト、コーポレートサイトのトップにそのまま埋め込めます。スクロールすると中央のフローティング pill に変形し、ロゴ・メニューラベル・CTA とアクセント色だけ差し替えて公開できます。スマホではナビを畳み、パソコン幅では実寸の3カラムで表示されます。 https://design-layer.com/catalog-previews/brand-bar-header.jpg ブランドバーヘッダー フル幅バー型のサイトヘッダー。左にブランド、中央にナビ、右にアクセント CTA を置いたダークテーマの完成パーツです。SaaS やプロダクト、コーポレートサイトのトップにそのまま埋め込めます。スクロールすると中央のフローティング pill に変形し、ロゴ・メニューラベル・CTA とアクセント色だけ差し替えて公開できます。スマホではナビを畳み、パソコン幅では実寸の3カラムで表示されます。 https://design-layer.com/catalog-previews/brand-bar-header.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/brand-bar-header https://design-layer.com/catalog-previews/brand-bar-header.jpg Brand Bar Header A full-width site header with brand on the left, navigation in the center, and an accent CTA on the right — a production-ready dark bar for SaaS, product, and corporate sites. On scroll it morphs into a floating center pill. Swap the logo, menu labels, CTA, and accent color, then ship. Nav collapses on phones and lays out as three columns on desktop. https://design-layer.com/catalog-previews/brand-bar-header.jpg Brand Bar Header A full-width site header with brand on the left, navigation in the center, and an accent CTA on the right — a production-ready dark bar for SaaS, product, and corporate sites. On scroll it morphs into a floating center pill. Swap the logo, menu labels, CTA, and accent color, then ship. Nav collapses on phones and lays out as three columns on desktop. https://design-layer.com/catalog-previews/brand-bar-header.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/product-feature-bento https://design-layer.com/catalog-previews/product-feature-bento.jpg 製品機能ベントー ダークな製品スペックを、ポートレート・横長・ワイドの非対称グリッドで並べるベントーです。線画アイコンと公式サービスロゴで機能を見せ、プロダクトLPの中盤にそのまま置けます。見出しテキストと連携サービス名を差し替えて公開できます。 https://design-layer.com/en/components/product-feature-bento https://design-layer.com/catalog-previews/product-feature-bento.jpg Product Feature Bento A dark product-spec bento: portrait, landscape, and wide tiles in an asymmetric grid. Line-art icons and official service logos present features, ready to drop into the middle of a product landing page. Swap the headlines and integration names, then ship. https://design-layer.com/ja/components/portfolio-profile-music-player https://design-layer.com/catalog-previews/portfolio-profile-music-player.jpg ポートフォリオミュージックプレイヤー 画面中央に浮かぶ pill 型のミュージックプレイヤーです。YouTube の URL または動画 ID を渡すと、隠し iframe で再生／一時停止できます。曲名・アーティスト名を差し替えて、ポートフォリオやプロフィールページにそのまま置けます。 https://design-layer.com/en/components/portfolio-profile-music-player https://design-layer.com/catalog-previews/portfolio-profile-music-player.jpg Portfolio Profile Music Player A floating center pill music player. Pass a YouTube URL or video ID to play and pause via a hidden iframe. Swap the artist and track label, then drop it onto a portfolio or profile page. https://design-layer.com/ja/components/template-showcase-marquee https://design-layer.com/catalog-previews/template-showcase-marquee.jpg テンプレートショーケースマーキー Safari 風モックにテンプレートのスクリーンショットを載せ、無限スクロールで流すショーケースです。見出しと各カードの画像・URL を差し替えて、プロダクト LP やテンプレート一覧の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/template-showcase-marquee.jpg テンプレートショーケースマーキー Safari 風モックにテンプレートのスクリーンショットを載せ、無限スクロールで流すショーケースです。見出しと各カードの画像・URL を差し替えて、プロダクト LP やテンプレート一覧の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/template-showcase-marquee.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/template-showcase-marquee https://design-layer.com/catalog-previews/template-showcase-marquee.jpg Template Showcase Marquee An infinite-scroll showcase of template screenshots inside Safari-style mockups. Swap the heading and each card’s image and URL, then drop it into a product landing page or template gallery. https://design-layer.com/catalog-previews/template-showcase-marquee.jpg Template Showcase Marquee An infinite-scroll showcase of template screenshots inside Safari-style mockups. Swap the heading and each card’s image and URL, then drop it into a product landing page or template gallery. https://design-layer.com/catalog-previews/template-showcase-marquee.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/floating-pill-header https://design-layer.com/catalog-previews/floating-pill-header.jpg フローティング pill ヘッダー 画面上部に浮かぶ pill 型ヘッダー。ガラスのぼかしとコンパクトなナビで、ヒーローの上に重ねて使えます。ブランド名・メニュー・CTA と色を差し替えて、ランディングやポートフォリオにそのまま置けます。 https://design-layer.com/en/components/floating-pill-header https://design-layer.com/catalog-previews/floating-pill-header.jpg Floating Pill Header A floating pill header with glass blur, meant to sit over a hero. Swap brand, menu, CTA, and color, then drop it onto a landing page or portfolio. https://design-layer.com/ja/components/product-viewer https://design-layer.com/catalog-previews/product-viewer.jpg プロダクトビューア 中央の製品ビジュアルと、周囲に浮かぶ＋ピルでディテールを切り替えるプロダクトビューアです。見出し・各ピルの文言と画像を差し替えて、プロダクトLPの中盤にそのまま置けます。 https://design-layer.com/en/components/product-viewer https://design-layer.com/catalog-previews/product-viewer.jpg Product Viewer A product viewer with a centered hero visual and floating plus-pills for feature details. Swap the heading, pill copy, and images, then drop it into the middle of a product landing page. https://design-layer.com/ja/components/ncs-sound-halo https://design-layer.com/catalog-previews/ncs-sound-halo.jpg グラスオーブヒーロー 黒い画面いっぱいに、虹彩のガラスオーブが粒子で浮かぶフルスクリーン Hero です。キッカーと見出しを差し替えて、プロダクトやブランド、クリエイティブ系 LP の先頭に置けます。 https://design-layer.com/catalog-previews/ncs-sound-halo.jpg グラスオーブヒーロー 黒い画面いっぱいに、虹彩のガラスオーブが粒子で浮かぶフルスクリーン Hero です。キッカーと見出しを差し替えて、プロダクトやブランド、クリエイティブ系 LP の先頭に置けます。 https://design-layer.com/catalog-previews/ncs-sound-halo.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/ncs-sound-halo https://design-layer.com/catalog-previews/ncs-sound-halo.jpg Glass Orb Hero A full-screen hero with an iridescent glass orb of particles on black. Swap the kicker and title, then drop it onto a product, brand, or creative landing page. https://design-layer.com/catalog-previews/ncs-sound-halo.jpg Glass Orb Hero A full-screen hero with an iridescent glass orb of particles on black. Swap the kicker and title, then drop it onto a product, brand, or creative landing page. https://design-layer.com/catalog-previews/ncs-sound-halo.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/saapro-hero https://design-layer.com/catalog-previews/saapro-hero.jpg グリーン・スクロールヒーロー ベージュ枠と砂色カードのフルスクリーン Hero です。sticky スクロールに合わせて、中央の草木 Lottie の後ろから見出し全文が文字ごとに現れます。見出し・サブコピー・ロゴ・Lottie を差し替えて、環境・テック・ブランド系 LP の先頭に置けます。 https://design-layer.com/catalog-previews/saapro-hero.jpg グリーン・スクロールヒーロー ベージュ枠と砂色カードのフルスクリーン Hero です。sticky スクロールに合わせて、中央の草木 Lottie の後ろから見出し全文が文字ごとに現れます。見出し・サブコピー・ロゴ・Lottie を差し替えて、環境・テック・ブランド系 LP の先頭に置けます。 https://design-layer.com/catalog-previews/saapro-hero.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/saapro-hero https://design-layer.com/catalog-previews/saapro-hero.jpg Green Scroll Hero A full-screen hero with a beige frame and sandy card. As you scroll the sticky stage, the headline reveals letter by letter from behind a central greenery Lottie. Swap the headline, subcopy, logo, and Lottie, then drop it onto an environment, tech, or brand landing page. https://design-layer.com/catalog-previews/saapro-hero.jpg Green Scroll Hero A full-screen hero with a beige frame and sandy card. As you scroll the sticky stage, the headline reveals letter by letter from behind a central greenery Lottie. Swap the headline, subcopy, logo, and Lottie, then drop it onto an environment, tech, or brand landing page. https://design-layer.com/catalog-previews/saapro-hero.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/golden-oracle-hero https://design-layer.com/catalog-previews/golden-oracle-hero.jpg ゴールデン・オラクルヒーロー 白枠とゴールドの背景イラストの上に、ナビ・キャラ名・ロア・CTA を重ねるフルスクリーン Hero です。キャラ名・肩書き・説明文・ナビ・背景画像・ロゴを差し替えて、ゲームやエンタメ系 LP の先頭にそのまま置けます。 https://design-layer.com/en/components/golden-oracle-hero https://design-layer.com/catalog-previews/golden-oracle-hero.jpg Golden Oracle Hero A full-screen hero with a white frame over golden character artwork. Navigation, character name, lore, and pill CTAs sit on top of the illustration. Swap the copy, nav labels, background image, and logos, then drop it onto a game or entertainment landing page. https://design-layer.com/ja/components/sakura-editorial-poster https://design-layer.com/catalog-previews/sakura-editorial-poster.jpg 桜エディトリアルポスター 外周余白つきの桜ポスター Hero です。初回は背景と桜枝の画像のみ。スクロールすると枝の後ろから巨大タイトルが文字ごとに現れ、最後に下部の和洋混在コピーが出ます。タイトル・見出し・本文・キーワード・背景／前景画像を差し替えて、文化・旅行・ブランド系 LP の先頭に置けます。 https://design-layer.com/catalog-previews/sakura-editorial-poster.jpg 桜エディトリアルポスター 外周余白つきの桜ポスター Hero です。初回は背景と桜枝の画像のみ。スクロールすると枝の後ろから巨大タイトルが文字ごとに現れ、最後に下部の和洋混在コピーが出ます。タイトル・見出し・本文・キーワード・背景／前景画像を差し替えて、文化・旅行・ブランド系 LP の先頭に置けます。 https://design-layer.com/catalog-previews/sakura-editorial-poster.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/sakura-editorial-poster https://design-layer.com/catalog-previews/sakura-editorial-poster.jpg Sakura Editorial Poster A framed sakura poster hero. The first view is image-only; on scroll the oversized title reveals letter by letter from behind the branch, then editorial copy slides up. Swap the title, headlines, body, keywords, and background or foreground images, then drop it onto a culture, travel, or brand landing page. https://design-layer.com/catalog-previews/sakura-editorial-poster.jpg Sakura Editorial Poster A framed sakura poster hero. The first view is image-only; on scroll the oversized title reveals letter by letter from behind the branch, then editorial copy slides up. Swap the title, headlines, body, keywords, and background or foreground images, then drop it onto a culture, travel, or brand landing page. https://design-layer.com/catalog-previews/sakura-editorial-poster.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/digital-rain-name-footer https://design-layer.com/catalog-previews/digital-rain-name-footer.jpg デジタルレイン・ネームフッター 黒地にティールのデジタル画素が下から上へ流れ続けるフルスクリーン Footer です。中央に大きく名前を置き、右下に著作権文を添えます。名前とコピーライト文を差し替えて、ポートフォリオやクリエイティブ系 LP の末尾に置けます。 https://design-layer.com/catalog-previews/digital-rain-name-footer.jpg デジタルレイン・ネームフッター 黒地にティールのデジタル画素が下から上へ流れ続けるフルスクリーン Footer です。中央に大きく名前を置き、右下に著作権文を添えます。名前とコピーライト文を差し替えて、ポートフォリオやクリエイティブ系 LP の末尾に置けます。 https://design-layer.com/catalog-previews/digital-rain-name-footer.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/digital-rain-name-footer https://design-layer.com/catalog-previews/digital-rain-name-footer.jpg Digital Rain Name Footer A full-screen footer of teal digital pixels rising from bottom to top on black. A large centered name and a bottom-right copyright line. Swap the name and legal copy, then drop it at the end of a portfolio or creative landing page. https://design-layer.com/catalog-previews/digital-rain-name-footer.jpg Digital Rain Name Footer A full-screen footer of teal digital pixels rising from bottom to top on black. A large centered name and a bottom-right copyright line. Swap the name and legal copy, then drop it at the end of a portfolio or creative landing page. https://design-layer.com/catalog-previews/digital-rain-name-footer.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/portfolio-types-section https://design-layer.com/catalog-previews/portfolio-types-section.jpg ポートフォリオタイプ・デッキ スクロールに合わせてカードがデッキ状に積み上がるポートフォリオ領域セクションです。背面に流れるウェーブリボンと、各領域の画像／動画を差し替えて、クリエイティブスタジオやエージェンシーの LP 中盤にそのまま置けます。 https://design-layer.com/catalog-previews/portfolio-types-section.jpg ポートフォリオタイプ・デッキ スクロールに合わせてカードがデッキ状に積み上がるポートフォリオ領域セクションです。背面に流れるウェーブリボンと、各領域の画像／動画を差し替えて、クリエイティブスタジオやエージェンシーの LP 中盤にそのまま置けます。 https://design-layer.com/catalog-previews/portfolio-types-section.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/portfolio-types-section https://design-layer.com/catalog-previews/portfolio-types-section.jpg Portfolio Types Deck A scroll-driven deck of portfolio discipline cards over a flowing ribbon banner. Swap card copy, images, and videos, then drop it into a creative studio or agency landing page. https://design-layer.com/catalog-previews/portfolio-types-section.jpg Portfolio Types Deck A scroll-driven deck of portfolio discipline cards over a flowing ribbon banner. Swap card copy, images, and videos, then drop it into a creative studio or agency landing page. https://design-layer.com/catalog-previews/portfolio-types-section.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/integrations-hub https://design-layer.com/catalog-previews/integrations-hub.jpg インテグレーションハブ 既存ツールのロゴが中央ハブに集約される連携図です。パルスが線上を流れ、狭い画面でも同じ放射レイアウトを縮小表示します。ハブ文言と各ツールの画像を差し替えて、SaaS や業務系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/integrations-hub.jpg インテグレーションハブ 既存ツールのロゴが中央ハブに集約される連携図です。パルスが線上を流れ、狭い画面でも同じ放射レイアウトを縮小表示します。ハブ文言と各ツールの画像を差し替えて、SaaS や業務系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/integrations-hub.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/integrations-hub https://design-layer.com/catalog-previews/integrations-hub.jpg Integrations Hub An integrations diagram where tool logos gather into a center hub with pulsing connector lines. The same radial layout scales down on narrow screens. Swap the hub label and tool images, then drop it into a SaaS or ops landing page. https://design-layer.com/catalog-previews/integrations-hub.jpg Integrations Hub An integrations diagram where tool logos gather into a center hub with pulsing connector lines. The same radial layout scales down on narrow screens. Swap the hub label and tool images, then drop it into a SaaS or ops landing page. https://design-layer.com/catalog-previews/integrations-hub.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/grainient-images-section https://design-layer.com/catalog-previews/grainient-images-section.jpg グレイニエント画像セクション 黒地にグラデーション画像が浮かぶフルブリードセクションです。画面固定のままスクロールすると画像群全体が画面中央へズームインし、最後に中央見出しが出現します。見出しと各タイル画像を差し替えて、デザイン系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/grainient-images-section.jpg グレイニエント画像セクション 黒地にグラデーション画像が浮かぶフルブリードセクションです。画面固定のままスクロールすると画像群全体が画面中央へズームインし、最後に中央見出しが出現します。見出しと各タイル画像を差し替えて、デザイン系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/grainient-images-section.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/grainient-images-section https://design-layer.com/catalog-previews/grainient-images-section.jpg Grainient Images Section A full-bleed black section where gradient tiles zoom in as you scroll, then a centered headline fades in. Swap the title and tile images, then drop it into a design or creative landing page. https://design-layer.com/catalog-previews/grainient-images-section.jpg Grainient Images Section A full-bleed black section where gradient tiles zoom in as you scroll, then a centered headline fades in. Swap the title and tile images, then drop it into a design or creative landing page. https://design-layer.com/catalog-previews/grainient-images-section.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/clicky-keyboard https://design-layer.com/catalog-previews/clicky-keyboard.jpg クリッキィキーボード Mac 配列の Keyboard Simulator です。キーをクリックするか、実機のキーボードで入力するとメカニカルなクリック音が鳴り、押したキーが上にプレビューされます。プロダクトやテック系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/clicky-keyboard.jpg クリッキィキーボード Mac 配列の Keyboard Simulator です。キーをクリックするか、実機のキーボードで入力するとメカニカルなクリック音が鳴り、押したキーが上にプレビューされます。プロダクトやテック系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/clicky-keyboard.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/clicky-keyboard https://design-layer.com/catalog-previews/clicky-keyboard.jpg Clicky Keyboard A Mac-layout Keyboard Simulator. Click a key — or type on your own keyboard — to hear a mechanical click and see the key preview above. Drop it into a product or tech landing page. https://design-layer.com/catalog-previews/clicky-keyboard.jpg Clicky Keyboard A Mac-layout Keyboard Simulator. Click a key — or type on your own keyboard — to hear a mechanical click and see the key preview above. Drop it into a product or tech landing page. https://design-layer.com/catalog-previews/clicky-keyboard.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/cinematic-audio-player https://design-layer.com/catalog-previews/cinematic-audio-player.jpg シネマティック・オーディオプレイヤー 横長のシネマティックなオーディオプレイヤーです。ジャケット・曲名・シークバー・シャッフル／リピートと音量を備え、YouTube URL のプレイリストで連続再生できます。曲情報とカバー画像を差し替えて、ポートフォリオやエンタメ系 LP にそのまま置けます。 https://design-layer.com/en/components/cinematic-audio-player https://design-layer.com/catalog-previews/cinematic-audio-player.jpg Cinematic Audio Player A wide cinematic audio player with cover art, seek bar, shuffle/repeat, and volume. Drive a YouTube playlist for continuous playback. Swap track metadata and cover art, then drop it onto a portfolio or entertainment landing page. https://design-layer.com/ja/components/abstract-mask https://design-layer.com/catalog-previews/abstract-mask.jpg アブストラクトマスク 白地に、小さな角丸カードの窓が開くフルブリードセクションです。スクロールすると窓が画面いっぱいに広がり、内側のカラー面とコピーが現れます。ラベル・見出し・本文を差し替えて、エージェンシーやテック系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/abstract-mask.jpg アブストラクトマスク 白地に、小さな角丸カードの窓が開くフルブリードセクションです。スクロールすると窓が画面いっぱいに広がり、内側のカラー面とコピーが現れます。ラベル・見出し・本文を差し替えて、エージェンシーやテック系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/abstract-mask.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/abstract-mask https://design-layer.com/catalog-previews/abstract-mask.jpg Abstract Mask A white full-bleed section whose small rounded card window expands to fill the viewport on scroll, revealing a solid color field and copy inside. Swap the labels, headline, and body, then drop it into an agency or tech landing page. https://design-layer.com/catalog-previews/abstract-mask.jpg Abstract Mask A white full-bleed section whose small rounded card window expands to fill the viewport on scroll, revealing a solid color field and copy inside. Swap the labels, headline, and body, then drop it into an agency or tech landing page. https://design-layer.com/catalog-previews/abstract-mask.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/pixel-arc-loader https://design-layer.com/catalog-previews/pixel-arc-loader.jpg ピクセルアーク・ローダー ボケた風景写真の上に、アーチ状の 3D ピクセルロゴが文字ごとに波打つフルスクリーンのローディング画面です。ロゴ文言と背景写真を差し替えて、ゲームやクリエイティブ系サイトの読み込み待ちにそのまま置けます。 https://design-layer.com/catalog-previews/pixel-arc-loader.jpg ピクセルアーク・ローダー ボケた風景写真の上に、アーチ状の 3D ピクセルロゴが文字ごとに波打つフルスクリーンのローディング画面です。ロゴ文言と背景写真を差し替えて、ゲームやクリエイティブ系サイトの読み込み待ちにそのまま置けます。 https://design-layer.com/catalog-previews/pixel-arc-loader.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/pixel-arc-loader https://design-layer.com/catalog-previews/pixel-arc-loader.jpg Pixel Arc Loader A full-screen loader with a blurred landscape behind an arched 3D pixel logo. Letters bob in a traveling wave. Swap the title and background photo, then drop it onto a game or creative site while content loads. https://design-layer.com/catalog-previews/pixel-arc-loader.jpg Pixel Arc Loader A full-screen loader with a blurred landscape behind an arched 3D pixel logo. Letters bob in a traveling wave. Swap the title and background photo, then drop it onto a game or creative site while content loads. https://design-layer.com/catalog-previews/pixel-arc-loader.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/home-point-ba https://design-layer.com/catalog-previews/home-point-ba.jpg ビフォーアフター・スクロール スクロールすると画面が止まったまま、ビフォーの写真が横に拭き取られてアフターへ切り替わります。そのあと、もう1枚の写真が小さく現れて画面いっぱいに広がります。ラベル・写真・注記を差し替えて、美容やプロダクト LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/home-point-ba.jpg ビフォーアフター・スクロール スクロールすると画面が止まったまま、ビフォーの写真が横に拭き取られてアフターへ切り替わります。そのあと、もう1枚の写真が小さく現れて画面いっぱいに広がります。ラベル・写真・注記を差し替えて、美容やプロダクト LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/home-point-ba.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/home-point-ba https://design-layer.com/catalog-previews/home-point-ba.jpg Before After Scroll As you scroll, the screen stays put. Before wipes sideways into After, then a third photo grows in and fills the view. Swap labels, photos, and notes, then drop it into a beauty or product landing page. https://design-layer.com/catalog-previews/home-point-ba.jpg Before After Scroll As you scroll, the screen stays put. Before wipes sideways into After, then a third photo grows in and fills the view. Swap labels, photos, and notes, then drop it into a beauty or product landing page. https://design-layer.com/catalog-previews/home-point-ba.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/home-point-ingredient https://design-layer.com/catalog-previews/home-point-ingredient.jpg 成分スクロール 横画面では左の縦ビジュアルが中央から寄って拡大し、右に成分カードが交互に現れます。カードの名前・説明と写真、縦ビジュアルを差し替えて、美容やプロダクト LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/home-point-ingredient.jpg 成分スクロール 横画面では左の縦ビジュアルが中央から寄って拡大し、右に成分カードが交互に現れます。カードの名前・説明と写真、縦ビジュアルを差し替えて、美容やプロダクト LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/home-point-ingredient.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/home-point-ingredient https://design-layer.com/catalog-previews/home-point-ingredient.jpg Ingredient Scroll On landscape screens, a vertical visual slides in from the center and grows on the left while ingredient cards stagger in on the right. Swap the card copy, photos, and media, then drop it into a beauty or product landing page. https://design-layer.com/catalog-previews/home-point-ingredient.jpg Ingredient Scroll On landscape screens, a vertical visual slides in from the center and grows on the left while ingredient cards stagger in on the right. Swap the card copy, photos, and media, then drop it into a beauty or product landing page. https://design-layer.com/catalog-previews/home-point-ingredient.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/owners-pricing-section https://design-layer.com/catalog-previews/owners-pricing-section.jpg オーナーズ料金 夜景のオフィス写真の上に濃い黒のオーバーレイを重ね、料金・特典リスト・ストア導線とプロダクト写真を置く会員プライシングです。見出し・価格・特典文と背景／商品写真を差し替えて、金融や会員制 LP の中盤にそのまま置けます。 https://design-layer.com/en/components/owners-pricing-section https://design-layer.com/catalog-previews/owners-pricing-section.jpg Owners Pricing A membership pricing block over a night-office photo with a 78% black overlay. Price, two-column perks, store badges, and a product still sit on top. Swap the copy and photos, then drop it into a finance or members landing page. https://design-layer.com/ja/components/pin-spacer-works https://design-layer.com/catalog-previews/pin-spacer-works.jpg ピンスペーサー・ワークス スクロールすると画面が固定（pin-spacer）され、左右に並んだ作品写真が奥から手前へ飛び出す 3D フライスルーです。背景にはアクティブな作品のぼかし写真がクロスフェードし、下部にアクティブな作品名が追従します。作品名・クライアント名・写真を差し替えて、フォトグラファーやクリエイティブ系ポートフォリオの中盤にそのまま置けます。 https://design-layer.com/catalog-previews/pin-spacer-works.jpg ピンスペーサー・ワークス スクロールすると画面が固定（pin-spacer）され、左右に並んだ作品写真が奥から手前へ飛び出す 3D フライスルーです。背景にはアクティブな作品のぼかし写真がクロスフェードし、下部にアクティブな作品名が追従します。作品名・クライアント名・写真を差し替えて、フォトグラファーやクリエイティブ系ポートフォリオの中盤にそのまま置けます。 https://design-layer.com/catalog-previews/pin-spacer-works.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/pin-spacer-works https://design-layer.com/catalog-previews/pin-spacer-works.jpg Pin Spacer Works A pinned full-screen works gallery. As you scroll, photos alternating left and right fly out of the distance toward the camera while a blurred backdrop of the active work crossfades behind them. The active work's name follows along the bottom bar. Swap the talent names, clients, and photos, then drop it into a photographer or creative portfolio. https://design-layer.com/catalog-previews/pin-spacer-works.jpg Pin Spacer Works A pinned full-screen works gallery. As you scroll, photos alternating left and right fly out of the distance toward the camera while a blurred backdrop of the active work crossfades behind them. The active work's name follows along the bottom bar. Swap the talent names, clients, and photos, then drop it into a photographer or creative portfolio. https://design-layer.com/catalog-previews/pin-spacer-works.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/video-production-works https://design-layer.com/catalog-previews/video-production-works.jpg 映像ワークス・コラージュ 濃いグレーのフルビューポートに、斜めのフォトコラージュが下から上へ流れ続けます。左上に見出しと本文、最下に巨大なセリフ英字を重ねます。文言と写真を差し替えて、映像やクリエイティブ系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/video-production-works.jpg 映像ワークス・コラージュ 濃いグレーのフルビューポートに、斜めのフォトコラージュが下から上へ流れ続けます。左上に見出しと本文、最下に巨大なセリフ英字を重ねます。文言と写真を差し替えて、映像やクリエイティブ系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/video-production-works.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/video-production-works https://design-layer.com/catalog-previews/video-production-works.jpg Video Works Collage A full-viewport works block: a diagonal photo collage drifts upward on charcoal, with a serif headline, body, CTA, and oversized type at the bottom. Swap the copy and stills, then drop it into a film or creative landing page. https://design-layer.com/catalog-previews/video-production-works.jpg Video Works Collage A full-viewport works block: a diagonal photo collage drifts upward on charcoal, with a serif headline, body, CTA, and oversized type at the bottom. Swap the copy and stills, then drop it into a film or creative landing page. https://design-layer.com/catalog-previews/video-production-works.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/enk-gallery https://design-layer.com/catalog-previews/enk-gallery.jpg 境内ギャラリー 画面が止まったまま、2枚組の写真がスクロールで下から上へワイプして次の組へ切り替わります。写真と代替テキストを差し替えて、庭園や文化、宿泊系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/enk-gallery.jpg 境内ギャラリー 画面が止まったまま、2枚組の写真がスクロールで下から上へワイプして次の組へ切り替わります。写真と代替テキストを差し替えて、庭園や文化、宿泊系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/enk-gallery.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/enk-gallery https://design-layer.com/catalog-previews/enk-gallery.jpg Temple Grounds Gallery A sticky full-viewport gallery. Paired photos wipe upward as you scroll, then the next pair takes their place. Swap the stills, then drop it into a garden, culture, or hospitality landing page. https://design-layer.com/catalog-previews/enk-gallery.jpg Temple Grounds Gallery A sticky full-viewport gallery. Paired photos wipe upward as you scroll, then the next pair takes their place. Swap the stills, then drop it into a garden, culture, or hospitality landing page. https://design-layer.com/catalog-previews/enk-gallery.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/onsen-section https://design-layer.com/catalog-previews/onsen-section.jpg 温泉スクロール帯 画面が止まったまま、温泉写真がスクロールで切り替わるフルブリード帯です。ぼかした背景の上に前景パネルと縦書き見出し、和英の詩的コピーが並びます。見出し・本文・写真を差し替えて、旅館や温泉、宿泊系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/onsen-section.jpg 温泉スクロール帯 画面が止まったまま、温泉写真がスクロールで切り替わるフルブリード帯です。ぼかした背景の上に前景パネルと縦書き見出し、和英の詩的コピーが並びます。見出し・本文・写真を差し替えて、旅館や温泉、宿泊系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/onsen-section.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/onsen-section https://design-layer.com/catalog-previews/onsen-section.jpg Onsen Scroll Band A sticky full-bleed onsen band. Hot-spring stills crossfade as you scroll, with a blurred backdrop, a sharp foreground panel, a vertical heading, and bilingual verse. Swap the copy and photos, then drop it into a ryokan or hospitality landing page. https://design-layer.com/catalog-previews/onsen-section.jpg Onsen Scroll Band A sticky full-bleed onsen band. Hot-spring stills crossfade as you scroll, with a blurred backdrop, a sharp foreground panel, a vertical heading, and bilingual verse. Swap the copy and photos, then drop it into a ryokan or hospitality landing page. https://design-layer.com/catalog-previews/onsen-section.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/shuku-hero https://design-layer.com/catalog-previews/shuku-hero.jpg 宿ヒーロー 古蔵の写真がゆっくりズームしながら切り替わるフルスクリーン Hero です。スクロールするとイントロが消え、右寄りの本文が出ます。文言と写真を差し替えて、旅館や宿泊系 LP の先頭にそのまま置けます。 https://design-layer.com/catalog-previews/shuku-hero.jpg 宿ヒーロー 古蔵の写真がゆっくりズームしながら切り替わるフルスクリーン Hero です。スクロールするとイントロが消え、右寄りの本文が出ます。文言と写真を差し替えて、旅館や宿泊系 LP の先頭にそのまま置けます。 https://design-layer.com/catalog-previews/shuku-hero.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/shuku-hero https://design-layer.com/catalog-previews/shuku-hero.jpg Inn Hero A full-screen inn hero. Brewery stills Ken Burns and crossfade; on scroll the intro fades and right-aligned body copy appears. Swap the copy and photos, then drop it onto a ryokan or hospitality landing page. https://design-layer.com/catalog-previews/shuku-hero.jpg Inn Hero A full-screen inn hero. Brewery stills Ken Burns and crossfade; on scroll the intro fades and right-aligned body copy appears. Swap the copy and photos, then drop it onto a ryokan or hospitality landing page. https://design-layer.com/catalog-previews/shuku-hero.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/sd-projects https://design-layer.com/catalog-previews/sd-projects.jpg スタンダードデザイン・作品グリッド 建築・リノベ作品を masonry で並べる作品グリッドです。写真にホバーすると拡大し、下にタイトルとタグ、最下部に All Projects 帯があります。作品名・タグ・写真を差し替えて、建築やデザイン事務所の LP 中盤にそのまま置けます。 https://design-layer.com/catalog-previews/sd-projects.jpg スタンダードデザイン・作品グリッド 建築・リノベ作品を masonry で並べる作品グリッドです。写真にホバーすると拡大し、下にタイトルとタグ、最下部に All Projects 帯があります。作品名・タグ・写真を差し替えて、建築やデザイン事務所の LP 中盤にそのまま置けます。 https://design-layer.com/catalog-previews/sd-projects.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/sd-projects https://design-layer.com/catalog-previews/sd-projects.jpg Studio Projects Grid A masonry works grid for architecture and renovation. Photos zoom on hover, with serif titles, tags, and an All Projects band. Swap the titles, tags, and stills, then drop it into an architecture or studio landing page. https://design-layer.com/catalog-previews/sd-projects.jpg Studio Projects Grid A masonry works grid for architecture and renovation. Photos zoom on hover, with serif titles, tags, and an All Projects band. Swap the titles, tags, and stills, then drop it into an architecture or studio landing page. https://design-layer.com/catalog-previews/sd-projects.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/yohobrewing-footer https://design-layer.com/catalog-previews/yohobrewing-footer.jpg ヤッホーブルーイング・フッター 紺ボディにロゴ、3カラムナビ、SNS、コピーライトを置くクラフトビール向けフッターです。文言とロゴを差し替えて、飲食やブランド LP の末尾にそのまま置けます。 https://design-layer.com/en/components/yohobrewing-footer https://design-layer.com/catalog-previews/yohobrewing-footer.jpg Yoho Brewing Footer A navy site footer with logo, three-column nav, social icons, and copyright. Swap the copy and logo, then drop it at the end of a food or brand landing page. https://design-layer.com/ja/components/dark-infra-story https://design-layer.com/catalog-previews/dark-infra-story.jpg ダークインフラ・ストーリー帯 黒地に青写真グリッドを敷き、1枚の写真が左から右、中央、画面いっぱいに動くスクロール帯です。コピーと写真を差し替えて、テックやインフラ系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/dark-infra-story.jpg ダークインフラ・ストーリー帯 黒地に青写真グリッドを敷き、1枚の写真が左から右、中央、画面いっぱいに動くスクロール帯です。コピーと写真を差し替えて、テックやインフラ系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/dark-infra-story.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/dark-infra-story https://design-layer.com/catalog-previews/dark-infra-story.jpg Dark Infra Story Band A zinc-950 scroll band with a blueprint grid. One still moves left, then right, then center, then fills the viewport. Swap the copy and photo, then drop it into a tech or infrastructure landing page. https://design-layer.com/catalog-previews/dark-infra-story.jpg Dark Infra Story Band A zinc-950 scroll band with a blueprint grid. One still moves left, then right, then center, then fills the viewport. Swap the copy and photo, then drop it into a tech or infrastructure landing page. https://design-layer.com/catalog-previews/dark-infra-story.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/dark-infra-footer https://design-layer.com/catalog-previews/dark-infra-footer.jpg ダークインフラ・フッター コンクリート建築の写真を全面に敷き、下部に見出し・リンク列・CTA・SNS・コピーライトを置くフルブリードフッターです。文言と背景写真を差し替えて、テックやインフラ系 LP の末尾にそのまま置けます。 https://design-layer.com/en/components/dark-infra-footer https://design-layer.com/catalog-previews/dark-infra-footer.jpg Dark Infra Footer A full-bleed photo footer over brutalist concrete, with a headline, link columns, CTA, social icons, and copyright along the bottom. Swap the copy and still, then drop it at the end of a tech or infrastructure landing page. https://design-layer.com/ja/components/path-drawing-portfolio-hero https://design-layer.com/catalog-previews/path-drawing-portfolio-hero.jpg パス描画ポートフォリオ・ヒーロー 暗い画面中央に、名前がストロークで描かれていくフルスクリーン Hero です。上に小さなラベル、下に肩書きとスクロール合図があります。表示名・肩書きを差し替えて、ポートフォリオの先頭にそのまま置けます。 https://design-layer.com/catalog-previews/path-drawing-portfolio-hero.jpg パス描画ポートフォリオ・ヒーロー 暗い画面中央に、名前がストロークで描かれていくフルスクリーン Hero です。上に小さなラベル、下に肩書きとスクロール合図があります。表示名・肩書きを差し替えて、ポートフォリオの先頭にそのまま置けます。 https://design-layer.com/catalog-previews/path-drawing-portfolio-hero.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/path-drawing-portfolio-hero https://design-layer.com/catalog-previews/path-drawing-portfolio-hero.jpg Path Drawing Portfolio Hero A full-screen hero whose name draws in as an SVG stroke. A small eyebrow sits above, a tagline and scroll cue below. Swap the name and line, then drop it at the top of a portfolio. https://design-layer.com/catalog-previews/path-drawing-portfolio-hero.jpg Path Drawing Portfolio Hero A full-screen hero whose name draws in as an SVG stroke. A small eyebrow sits above, a tagline and scroll cue below. Swap the name and line, then drop it at the top of a portfolio. https://design-layer.com/catalog-previews/path-drawing-portfolio-hero.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/portfolio-morph-contact https://design-layer.com/catalog-previews/portfolio-morph-contact.jpg モルフポートフォリオ・コンタクト 白地に左の大きな見出しと、右の浮遊フォームカードを置くお問い合わせセクションです。メール、SNS、名前／メール／本文、興味タグ、送信ボタンが並びます。見出しと窓口を差し替えて、ポートフォリオの末尾近くにそのまま置けます。 https://design-layer.com/en/components/portfolio-morph-contact https://design-layer.com/catalog-previews/portfolio-morph-contact.jpg Morph Portfolio Contact A contact block on white: a large headline on the left and a floating form card on the right. Email, social, name/email/message, interest chips, and a send button. Swap the copy and inbox, then drop it near the end of a portfolio. https://design-layer.com/ja/components/video-production-contact https://design-layer.com/catalog-previews/video-production-contact.jpg 映像制作・コンタクト フルブリード写真の上に暗いオーバーレイを重ね、中央に CONTACT US・案内文・メール、下部に3分割 CTA を置くお問い合わせです。文言と背景写真を差し替えて、映像やクリエイティブ系 LP の末尾近くにそのまま置けます。 https://design-layer.com/en/components/video-production-contact https://design-layer.com/catalog-previews/video-production-contact.jpg Video Production Contact A full-bleed photo contact with a dark overlay, a centered CONTACT US lockup, email, hours, and a three-split CTA row. Swap the copy and still, then drop it near the end of a film or creative landing page. https://design-layer.com/ja/components/album-package-showcase https://design-layer.com/catalog-previews/album-package-showcase.jpg アルバムパッケージ・ショーケース アルバムのパッケージ一式を斜めに重ねた 16:9 のエディトリアルセクションです。縦書きの帯、中央のジャケット、背後で回り続けるレコード盤、右の大見出し、右下のバーコード付き裏面カードが、それぞれ別のリズムで浮遊します。見出し・作品名・アーティスト名とジャケット画像を差し替えて、音楽リリースやアートワーク紹介の LP 中盤にそのまま置けます。 https://design-layer.com/en/components/album-package-showcase https://design-layer.com/catalog-previews/album-package-showcase.jpg Album Package Showcase A 16:9 editorial section that fans a full album package across the frame: a vertical obi strip, the cover art, a vinyl record spinning behind it, an oversized serif title, and a barcoded back card. Each layer drifts on its own rhythm while sparkles and a lens flare breathe. Swap the title, album name, artist, and cover image, then drop it into a music release or artwork landing page. https://design-layer.com/ja/components/flip-cta-newsletter https://design-layer.com/catalog-previews/flip-cta-newsletter.jpg フリップCTAニュースレター 白い背景に、エレクトリックマゼンタの 3D フリップボタンが印象的なニュースレター登録ブロックです。ボタンの各語がホバーで順番にめくれ、メール入力のバリデーションと成功表示を備えます。コピー・ボタン文言・プレースホルダーを差し替えて、EC やブランドサイトのフッター前にそのまま置けます。 https://design-layer.com/en/components/flip-cta-newsletter https://design-layer.com/catalog-previews/flip-cta-newsletter.jpg Flip CTA Newsletter A newsletter signup block on a white canvas with an electric-magenta 3D flip CTA. Each word of the button flips in sequence on hover, with email validation and a success state built in. Swap the copy, button label, and placeholder, then drop it before the footer of a brand or e-commerce site. https://design-layer.com/ja/components/borderless-account-vaults https://design-layer.com/catalog-previews/borderless-account-vaults.jpg ボーダレス口座ヴォールト 白地の中央に大きな見出しを置き、周囲の角丸 UI カードが最初は中央に集まり、セクションが表示されたときに星座状の最終位置へ広がるボーダレス口座セクションです。見出しと各カードの画像を差し替えて、フィンテックや SaaS の LP 中盤にそのまま置けます。 https://design-layer.com/catalog-previews/borderless-account-vaults.jpg ボーダレス口座ヴォールト 白地の中央に大きな見出しを置き、周囲の角丸 UI カードが最初は中央に集まり、セクションが表示されたときに星座状の最終位置へ広がるボーダレス口座セクションです。見出しと各カードの画像を差し替えて、フィンテックや SaaS の LP 中盤にそのまま置けます。 https://design-layer.com/catalog-previews/borderless-account-vaults.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/borderless-account-vaults https://design-layer.com/catalog-previews/borderless-account-vaults.jpg Borderless Account Vaults A borderless-account section with a large centered headline. Rounded UI cards start clustered in the middle, then expand into a constellation when the section enters the viewport. Swap the title and each card image, then drop it into a fintech or SaaS landing page. https://design-layer.com/catalog-previews/borderless-account-vaults.jpg Borderless Account Vaults A borderless-account section with a large centered headline. Rounded UI cards start clustered in the middle, then expand into a constellation when the section enters the viewport. Swap the title and each card image, then drop it into a fintech or SaaS landing page. https://design-layer.com/catalog-previews/borderless-account-vaults.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/benefits-scroll-list https://design-layer.com/catalog-previews/benefits-scroll-list.jpg ベネフィット・スクロールリスト 黒地の左に小さな sticky ラベル、右に巨大な大文字の単語リストを置くスクロールセクションです。ビューポート中央に来た語だけがシャープになり、上下はぼかして消えます。ラベルと単語を差し替えて、ウェルネスやブランド、プロダクト LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/benefits-scroll-list.jpg ベネフィット・スクロールリスト 黒地の左に小さな sticky ラベル、右に巨大な大文字の単語リストを置くスクロールセクションです。ビューポート中央に来た語だけがシャープになり、上下はぼかして消えます。ラベルと単語を差し替えて、ウェルネスやブランド、プロダクト LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/benefits-scroll-list.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/benefits-scroll-list https://design-layer.com/catalog-previews/benefits-scroll-list.jpg Benefits Scroll List A dark scroll section with a small sticky label on the left and an oversized uppercase word list on the right. The word in the middle of the viewport stays sharp; words above and below fade and blur. Swap the label and words, then drop it into a wellness, brand, or product landing page. https://design-layer.com/catalog-previews/benefits-scroll-list.jpg Benefits Scroll List A dark scroll section with a small sticky label on the left and an oversized uppercase word list on the right. The word in the middle of the viewport stays sharp; words above and below fade and blur. Swap the label and words, then drop it into a wellness, brand, or product landing page. https://design-layer.com/catalog-previews/benefits-scroll-list.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/collections-scroll-slider https://design-layer.com/catalog-previews/collections-scroll-slider.jpg コレクション・スクロールスライダー 砂色の右パネルとフルブリード背景が、sticky ピン留め中のスクロールで同期して切り替わるコレクション・スライダーです。タイトル・製品リスト・パックショット・導入文がパネル内でフェード／スライドします。コピーと画像を差し替えて、ラグジュアリーやプロダクト LP のヒーローにそのまま置けます。 https://design-layer.com/catalog-previews/collections-scroll-slider.jpg コレクション・スクロールスライダー 砂色の右パネルとフルブリード背景が、sticky ピン留め中のスクロールで同期して切り替わるコレクション・スライダーです。タイトル・製品リスト・パックショット・導入文がパネル内でフェード／スライドします。コピーと画像を差し替えて、ラグジュアリーやプロダクト LP のヒーローにそのまま置けます。 https://design-layer.com/catalog-previews/collections-scroll-slider.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/collections-scroll-slider https://design-layer.com/catalog-previews/collections-scroll-slider.jpg Collections Scroll Slider A full-screen collections slider: scroll through full-bleed backgrounds while a sand-colored right panel stays pinned and syncs titles, product lists, packshots, and intros. Swap the copy and images, then drop it onto a luxury or product landing page. https://design-layer.com/catalog-previews/collections-scroll-slider.jpg Collections Scroll Slider A full-screen collections slider: scroll through full-bleed backgrounds while a sand-colored right panel stays pinned and syncs titles, product lists, packshots, and intros. Swap the copy and images, then drop it onto a luxury or product landing page. https://design-layer.com/catalog-previews/collections-scroll-slider.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/home-projects-stack https://design-layer.com/catalog-previews/home-projects-stack.jpg ホームプロジェクト・スタック オリーブ地の左に巨大な3行見出し・吹き出し絵文字・アバター列、右にストーリー型の縦カードが横に並ぶ作品セクションです。カードはドラッグで切り替わり、上のバーが自動で進みます。見出し・タグ・写真を差し替えて、エージェンシーやスタジオの LP 中盤にそのまま置けます。 https://design-layer.com/catalog-previews/home-projects-stack.jpg ホームプロジェクト・スタック オリーブ地の左に巨大な3行見出し・吹き出し絵文字・アバター列、右にストーリー型の縦カードが横に並ぶ作品セクションです。カードはドラッグで切り替わり、上のバーが自動で進みます。見出し・タグ・写真を差し替えて、エージェンシーやスタジオの LP 中盤にそのまま置けます。 https://design-layer.com/catalog-previews/home-projects-stack.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/home-projects-stack https://design-layer.com/catalog-previews/home-projects-stack.jpg Home Projects Stack An agency works section: oversized headline, emoji bubble, and avatars on the left; Instagram-style portrait cards slide on the right. Drag to change cases, story bars auto-advance stills. Swap the copy and photos, then drop it into a studio or agency landing page. https://design-layer.com/catalog-previews/home-projects-stack.jpg Home Projects Stack An agency works section: oversized headline, emoji bubble, and avatars on the left; Instagram-style portrait cards slide on the right. Drag to change cases, story bars auto-advance stills. Swap the copy and photos, then drop it into a studio or agency landing page. https://design-layer.com/catalog-previews/home-projects-stack.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/moonsworth-companies-grid https://design-layer.com/catalog-previews/moonsworth-companies-grid.jpg ムーンズワース・カンパニーグリッド 白地に2×2の大型カードを1画面に収めるサイトグリッドです。各カードは背面にシャープなサイトプレビューを置き、ホバーで写真が縮みぼかしが入り四隅に丸ドットが現れると同時に、サイト名・業種/年/役割のメタ・ティールの CTA が表示されます。文言と写真を差し替えて、ポートフォリオやスタジオの実績紹介にそのまま置けます。 https://design-layer.com/catalog-previews/moonsworth-companies-grid.jpg ムーンズワース・カンパニーグリッド 白地に2×2の大型カードを1画面に収めるサイトグリッドです。各カードは背面にシャープなサイトプレビューを置き、ホバーで写真が縮みぼかしが入り四隅に丸ドットが現れると同時に、サイト名・業種/年/役割のメタ・ティールの CTA が表示されます。文言と写真を差し替えて、ポートフォリオやスタジオの実績紹介にそのまま置けます。 https://design-layer.com/catalog-previews/moonsworth-companies-grid.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/moonsworth-companies-grid https://design-layer.com/catalog-previews/moonsworth-companies-grid.jpg Moonsworth Companies Grid A white one-viewport sites grid with a 2×2 card layout. Each card shows a sharp website preview at rest; on hover the photo shrinks and blurs, corner dots appear, and the title, project meta (industry / year / role), and teal CTA fade in. Swap the copy and images, then drop it into a portfolio or studio works section. https://design-layer.com/catalog-previews/moonsworth-companies-grid.jpg Moonsworth Companies Grid A white one-viewport sites grid with a 2×2 card layout. Each card shows a sharp website preview at rest; on hover the photo shrinks and blurs, corner dots appear, and the title, project meta (industry / year / role), and teal CTA fade in. Swap the copy and images, then drop it into a portfolio or studio works section. https://design-layer.com/catalog-previews/moonsworth-companies-grid.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/music-video-pin-stack https://design-layer.com/catalog-previews/music-video-pin-stack.jpg ミュージックビデオ・ピンスタック 白い画面を sticky ピン留めし、中央のミュージックビデオ・サムネイルが下から積み上がるスクロールセクションです。左右に曲名・レーベル／リリース日が切り替わり、右端のドットが進捗を示します。見出し・曲情報・写真を差し替えて、アーティストやレーベルの LP 中盤にそのまま置けます。 https://design-layer.com/catalog-previews/music-video-pin-stack.jpg ミュージックビデオ・ピンスタック 白い画面を sticky ピン留めし、中央のミュージックビデオ・サムネイルが下から積み上がるスクロールセクションです。左右に曲名・レーベル／リリース日が切り替わり、右端のドットが進捗を示します。見出し・曲情報・写真を差し替えて、アーティストやレーベルの LP 中盤にそのまま置けます。 https://design-layer.com/catalog-previews/music-video-pin-stack.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/music-video-pin-stack https://design-layer.com/catalog-previews/music-video-pin-stack.jpg Music Video Pin Stack A sticky pin-stack music video section on a white field. Thumbnails rise from the bottom and layer in the center while the track title and label/release meta flicker on the sides, with progress dots on the right. Swap the heading, track info, and stills, then drop it into an artist or label landing page. https://design-layer.com/catalog-previews/music-video-pin-stack.jpg Music Video Pin Stack A sticky pin-stack music video section on a white field. Thumbnails rise from the bottom and layer in the center while the track title and label/release meta flicker on the sides, with progress dots on the right. Swap the heading, track info, and stills, then drop it into an artist or label landing page. https://design-layer.com/catalog-previews/music-video-pin-stack.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/pastel-pill-navbar https://design-layer.com/catalog-previews/pastel-pill-navbar.jpg パステル pill ナビ 淡いピンクの背景に浮かぶ白い pill 型ナビです。左にアプリグリッド、中央にアクティブ pill 付きメニュー、右にアバター・メール・通知・＋・メニューを並べます。ラベル・アバター・アクセント色を差し替えて、クリエイティブやプロフィール系サイトの先頭にそのまま置けます。 https://design-layer.com/en/components/pastel-pill-navbar https://design-layer.com/catalog-previews/pastel-pill-navbar.jpg Pastel Pill Navbar A soft white floating pill nav on a blush background. Apps grid on the left, active-pill menu in the center, avatar plus mail, notifications, add, and menu on the right. Swap labels, avatar, and accent colors, then drop it onto a creative or profile site. https://design-layer.com/ja/components/knockout-wordmark-opener https://design-layer.com/catalog-previews/knockout-wordmark-opener.jpg ノックアウト・クラウドオープナー サイトを開いた瞬間、塗りつぶした雲ロゴの窓が中のページを切り抜いて見せ、バブルで全画面になるオープニングです。先頭のヒーローや1ページを children に入れて使います。ロゴだけ差し替えて、ブランドサイトの読み込み演出にそのまま置けます。 https://design-layer.com/catalog-previews/knockout-wordmark-opener.jpg ノックアウト・クラウドオープナー サイトを開いた瞬間、塗りつぶした雲ロゴの窓が中のページを切り抜いて見せ、バブルで全画面になるオープニングです。先頭のヒーローや1ページを children に入れて使います。ロゴだけ差し替えて、ブランドサイトの読み込み演出にそのまま置けます。 https://design-layer.com/catalog-previews/knockout-wordmark-opener.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/knockout-wordmark-opener https://design-layer.com/catalog-previews/knockout-wordmark-opener.jpg Knockout Cloud Opener A site-open mask: a filled cloud window reveals the page inside, then a bubble mask expands to full screen. Wrap your existing hero or page as children. Swap the logo mark, then drop it at the top of a brand site. https://design-layer.com/catalog-previews/knockout-wordmark-opener.jpg Knockout Cloud Opener A site-open mask: a filled cloud window reveals the page inside, then a bubble mask expands to full screen. Wrap your existing hero or page as children. Swap the logo mark, then drop it at the top of a brand site. https://design-layer.com/catalog-previews/knockout-wordmark-opener.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/story-mode-expand https://design-layer.com/catalog-previews/story-mode-expand.jpg ワークス・エキスパンダ 白地に錆色の巨大見出しと、左の3分割画像ストリップ、右の番号付きリストを置く作品セクションです。ホバーで画像が横に広がり、MORE+ で詳細が下に開きます。他の項目の説明文は隠れ、タイトルと番号は残ります。見出し・案件名と写真を差し替えて、建築やデザイン事務所の LP 中盤にそのまま置けます。 https://design-layer.com/catalog-previews/story-mode-expand.jpg ワークス・エキスパンダ 白地に錆色の巨大見出しと、左の3分割画像ストリップ、右の番号付きリストを置く作品セクションです。ホバーで画像が横に広がり、MORE+ で詳細が下に開きます。他の項目の説明文は隠れ、タイトルと番号は残ります。見出し・案件名と写真を差し替えて、建築やデザイン事務所の LP 中盤にそのまま置けます。 https://design-layer.com/catalog-previews/story-mode-expand.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/story-mode-expand https://design-layer.com/catalog-previews/story-mode-expand.jpg Works Expand A numbered works section on white: an oversized rust heading, a three-pane image strip on the left, and a project list on the right. Hover widens the active still. MORE+ expands details below while the other items keep their titles and hide only the short descriptions. Swap the heading, project copy, and photos, then drop it into an architecture or studio landing page. https://design-layer.com/catalog-previews/story-mode-expand.jpg Works Expand A numbered works section on white: an oversized rust heading, a three-pane image strip on the left, and a project list on the right. Hover widens the active still. MORE+ expands details below while the other items keep their titles and hide only the short descriptions. Swap the heading, project copy, and photos, then drop it into an architecture or studio landing page. https://design-layer.com/catalog-previews/story-mode-expand.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/product-wordmark-hero https://design-layer.com/catalog-previews/product-wordmark-hero.jpg プロダクト・ワードマークヒーロー オフホワイトの画面に巨大な積み上げワードマークを置き、見出し下にスペック pill、右に製品写真を置くプロダクト Hero です。製品名・pill 文言と写真を差し替えて、ガジェットやブランド系 LP の先頭にそのまま置けます。 https://design-layer.com/en/components/product-wordmark-hero https://design-layer.com/catalog-previews/product-wordmark-hero.jpg Product Wordmark Hero A product hero on off-white: an oversized stacked wordmark, spec pills under the title, and a packshot on the right. Swap the title lines, pill copy, and photo, then drop it onto a gadget or brand landing page. https://design-layer.com/ja/components/sneaker-bold-hero https://design-layer.com/catalog-previews/sneaker-bold-hero.jpg スニーカー・ボールドヒーロー 白地の中央にスニーカーを置き、左に商品名とサムネ、右にサイズ丸・レビュー・価格・カラーを並べるシューズ Hero です。ホイールで次のカラーウェイへ切り替わります。コピーと写真を差し替えて、スニーカーやファッション系 LP の先頭にそのまま置けます。 https://design-layer.com/catalog-previews/sneaker-bold-hero.jpg スニーカー・ボールドヒーロー 白地の中央にスニーカーを置き、左に商品名とサムネ、右にサイズ丸・レビュー・価格・カラーを並べるシューズ Hero です。ホイールで次のカラーウェイへ切り替わります。コピーと写真を差し替えて、スニーカーやファッション系 LP の先頭にそのまま置けます。 https://design-layer.com/catalog-previews/sneaker-bold-hero.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/sneaker-bold-hero https://design-layer.com/catalog-previews/sneaker-bold-hero.jpg Sneaker Bold Hero A white product hero: centered packshot, title and thumbs on the left, size circles, reviews, price, and color dots on the right. Scroll or swipe to step through colorways. Swap the copy and photos, then drop it onto a footwear landing page. https://design-layer.com/catalog-previews/sneaker-bold-hero.jpg Sneaker Bold Hero A white product hero: centered packshot, title and thumbs on the left, size circles, reviews, price, and color dots on the right. Scroll or swipe to step through colorways. Swap the copy and photos, then drop it onto a footwear landing page. https://design-layer.com/catalog-previews/sneaker-bold-hero.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/sneaker-focus-carousel https://design-layer.com/catalog-previews/sneaker-focus-carousel.jpg スニーカー・フォーカスカルーセル 白地のファッション Hero です。上にサークルロゴとナビ、左にカテゴリ、中央に3足の円軌道カルーセルを置き、下に巨大ブランド名とキャプション、SEE MORE を置きます。中央の足はシャープ、左右はぼかします。ブランド名・ナビ・写真を差し替えて、スニーカーやファッション系 LP の先頭にそのまま置けます。 https://design-layer.com/catalog-previews/sneaker-focus-carousel.jpg スニーカー・フォーカスカルーセル 白地のファッション Hero です。上にサークルロゴとナビ、左にカテゴリ、中央に3足の円軌道カルーセルを置き、下に巨大ブランド名とキャプション、SEE MORE を置きます。中央の足はシャープ、左右はぼかします。ブランド名・ナビ・写真を差し替えて、スニーカーやファッション系 LP の先頭にそのまま置けます。 https://design-layer.com/catalog-previews/sneaker-focus-carousel.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/sneaker-focus-carousel https://design-layer.com/catalog-previews/sneaker-focus-carousel.jpg Sneaker Focus Carousel A white fashion hero: circle mark and nav on top, category rail on the left, three sneakers on a circular carousel, then an oversized brand wordmark, caption, and See more pill. The focused pair stays sharp; the sides blur. Swap the brand, nav, and photos, then drop it onto a footwear landing page. https://design-layer.com/catalog-previews/sneaker-focus-carousel.jpg Sneaker Focus Carousel A white fashion hero: circle mark and nav on top, category rail on the left, three sneakers on a circular carousel, then an oversized brand wordmark, caption, and See more pill. The focused pair stays sharp; the sides blur. Swap the brand, nav, and photos, then drop it onto a footwear landing page. https://design-layer.com/catalog-previews/sneaker-focus-carousel.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/pricing-roi-calculator https://design-layer.com/catalog-previews/pricing-roi-calculator.jpg 料金ROI計算機 白地に見出しと2カラムのカードを置く料金ROI計算機です。左で開発時間と時給をスライダー入力し、右に内製コストと月額プランの差額・時給換算を出します。コピーと比較月額を差し替えて、SaaS やプロダクト LP の料金ページにそのまま置けます。 https://design-layer.com/en/components/pricing-roi-calculator https://design-layer.com/catalog-previews/pricing-roi-calculator.jpg Pricing ROI Calculator A light ROI calculator: heading plus a two-column card. Sliders on the left estimate in-house hours and rate; the right column shows the gap versus a monthly plan and the labor-time equivalent. Swap the copy and comparison amount, then drop it onto a SaaS pricing page. https://design-layer.com/ja/components/japan-travel-hero https://design-layer.com/catalog-previews/japan-travel-hero.jpg ジャパン・トラベルヒーロー 開いた直後は夜のコンビニだけが見えます。スクロールすると切り抜いた富士が現れ、さらに進むと巨大ワードマークが山の後ろから出てきます。見出し・ナビと富士／コンビニ写真を差し替えて、旅行や観光系 LP の先頭にそのまま置けます。 https://design-layer.com/catalog-previews/japan-travel-hero.jpg ジャパン・トラベルヒーロー 開いた直後は夜のコンビニだけが見えます。スクロールすると切り抜いた富士が現れ、さらに進むと巨大ワードマークが山の後ろから出てきます。見出し・ナビと富士／コンビニ写真を差し替えて、旅行や観光系 LP の先頭にそのまま置けます。 https://design-layer.com/catalog-previews/japan-travel-hero.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/japan-travel-hero https://design-layer.com/catalog-previews/japan-travel-hero.jpg Japan Travel Hero A full-screen travel hero that starts on a night convenience store. Scroll to reveal a cut-out Mount Fuji, then the oversized wordmark rises from behind the mountain. Swap the copy and the two stills, then drop it onto a travel landing page. https://design-layer.com/catalog-previews/japan-travel-hero.jpg Japan Travel Hero A full-screen travel hero that starts on a night convenience store. Scroll to reveal a cut-out Mount Fuji, then the oversized wordmark rises from behind the mountain. Swap the copy and the two stills, then drop it onto a travel landing page. https://design-layer.com/catalog-previews/japan-travel-hero.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/statue-404 https://design-layer.com/catalog-previews/statue-404.jpg スタチュー 404 ざらついた紙地に巨大な 404 を置き、中央に石像の切り抜きを重ねるエラー画面です。文言・像の画像・アクセント色を差し替えて、サイトの not-found にそのまま置けます。 https://design-layer.com/en/components/statue-404 https://design-layer.com/catalog-previews/statue-404.jpg Statue 404 An editorial 404 on textured paper: a giant wordmark with a marble statue cut-out in the center. Swap the copy, statue still, and accent color, then drop it into not-found. https://design-layer.com/ja/components/space-explore-section https://design-layer.com/catalog-previews/space-explore-section.jpg スペース・エクスプロア 白背景の一画面に、SPACE / MARS / EARTH / MERCURY のフォンカードを4枚並べるセクションです。各カードは巨大な縦積みワードマークと惑星／宇宙飛行士を持ちます。見出し・本文と写真を差し替えて、宇宙やトラベル、エンタメ系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/space-explore-section.jpg スペース・エクスプロア 白背景の一画面に、SPACE / MARS / EARTH / MERCURY のフォンカードを4枚並べるセクションです。各カードは巨大な縦積みワードマークと惑星／宇宙飛行士を持ちます。見出し・本文と写真を差し替えて、宇宙やトラベル、エンタメ系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/space-explore-section.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/en/components/space-explore-section https://design-layer.com/catalog-previews/space-explore-section.jpg Space Explore A white one-screen gallery of four phone cards — SPACE, MARS, EARTH, MERCURY. Each card keeps the oversized stacked wordmark and planet or astronaut. Swap the titles, copy, and stills, then drop it into a space, travel, or entertainment landing page. https://design-layer.com/catalog-previews/space-explore-section.jpg Space Explore A white one-screen gallery of four phone cards — SPACE, MARS, EARTH, MERCURY. Each card keeps the oversized stacked wordmark and planet or astronaut. Swap the titles, copy, and stills, then drop it into a space, travel, or entertainment landing page. https://design-layer.com/catalog-previews/space-explore-section.mp4 2026-09-17T00:00:00.000Z yes no https://design-layer.com/ja/components/garden-prompt-hero https://design-layer.com/catalog-previews/garden-prompt-hero.jpg ガーデン・プロンプトヒーロー 草原の丘と青空を全面に敷いた1画面 Hero です。上部にロゴとナビ、中央に見出しとプロンプト入力欄が並びます。文言と背景写真を差し替えて、ビジネス向け AI の LP 先頭にそのまま置けます。 https://design-layer.com/en/components/garden-prompt-hero https://design-layer.com/catalog-previews/garden-prompt-hero.jpg Garden Prompt Hero A one-screen business AI hero over grassy hills and blue sky: brand and nav on top, headline and a prompt field in the center. Swap the copy and background photo, then drop it onto an enterprise AI landing page. https://design-layer.com/ja/components/floating-poster-orbit https://design-layer.com/catalog-previews/floating-poster-orbit.jpg フローティングポスター・オービット 暖色のグローを背景に、角丸ポスターを3段の横並びで流す1画面 Hero です。上段と下段は左へ、中段は右へループします。写真を差し替えて、映像・エンタメ・プロダクト LP の先頭にそのまま置けます。 https://design-layer.com/en/components/floating-poster-orbit https://design-layer.com/catalog-previews/floating-poster-orbit.jpg Floating Poster Orbit A one-screen cinematic field of rounded posters in three horizontal rows over a warm projector glow. The top and bottom rows drift left, the middle row drifts right. Swap the photos, then drop it onto a film, entertainment, or product landing page. https://design-layer.com/ja/components/magnetic-cta-button https://design-layer.com/catalog-previews/magnetic-cta-button.jpg マグネティック CTA ボタン 右に矢印バッジのある pill 型 CTA です。ラベルとリンクを差し替えて、ヒーローや料金プランの CTA にそのまま置けます。 https://design-layer.com/en/components/magnetic-cta-button https://design-layer.com/catalog-previews/magnetic-cta-button.jpg Magnetic CTA Button A pill CTA with an arrow badge on the right. Swap the label and href, then drop it onto a hero or pricing block. https://design-layer.com/ja/components/glass-sidebar-nav https://design-layer.com/catalog-previews/glass-sidebar-nav.jpg ガラスサイドバーナビ 暗い抽象彫刻の壁紙を1画面いっぱいに敷き、その上にガラスの縦型サイドバーを置くナビです。macOS 風の赤黄緑ドット、中央のブランド、MENU とセカンダリ項目、下部のアカウント行を frosted panel にまとめます。背景写真・ブランド名・メニュー文言・アバターとアクセント色を差し替えて、ダッシュボードやソーシャル系 UI にそのまま置けます。 https://design-layer.com/en/components/glass-sidebar-nav https://design-layer.com/catalog-previews/glass-sidebar-nav.jpg Glass Sidebar Nav A full-viewport dark abstract sculpture wallpaper with a tall frosted-glass sidebar on top: macOS traffic-light dots, a centered brand wordmark, MENU and secondary rows, and an account footer. Swap the background, brand, menu labels, avatar, and accent color, then drop it into a dashboard or social-style UI.