DesignLayer の一部デザインを 21st.dev に掲載しました

2026年9月9日 · お知らせ

DesignLayer で公開しているモーション React コンポーネントのうち、一部を 21st.dev にも掲載しました。レジストリからそのまま試せます。

掲載をはじめました

DesignLayer のカタログにあるデザインのうち、いくつかを 21st.dev に掲載しました。21st.dev で動きのあるブロックを探している方が、DesignLayer のセクションをそのまま試せるようにするためです。

カタログ全体を移したわけではありません。まずは動きが分かりやすいヒーローやセクションを数本出しています。続きは DesignLayer 本体のコンポーネント一覧でご覧ください。https://design-layer.com/components

・Sakura Editorial Poster — 桜の枝の奥からタイトルが文字単位で現れる、スクロール連動のエディトリアル・ヒーロー。https://21st.dev/@DesignLayer/components/sakura-editorial-poster

・Pixel Arc Loader — 円弧が画素のように積み上がるローダー。https://21st.dev/@DesignLayer/components/pixel-arc-loader

・Grainient Images Section — グレインのかかったグラデーション上に写真が並ぶ画像セクション。https://21st.dev/@DesignLayer/components/grainient-images-section

・Path Drawing Portfolio Hero — パスが描かれていくポートフォリオ向けヒーロー。https://21st.dev/@DesignLayer/components/path-drawing-portfolio-hero

掲載本数はこれから増やします。全部を 21st.dev に載せる予定はありません。

21st.dev の各ページからプレビューを開き、気に入ったものだけプロジェクトへ入れてください。CLI を使う場合の例です。

bash

npx @21st-dev/cli add @DesignLayer/sakura-editorial-poster

21st.dev は配布用の棚です。ライブプレビューを並べて比較したり、Copy for Cursor / Claude でソースと統合指示をまとめて渡したりするのは、これまでどおり DesignLayer 側の作業です。

無料のソースコピーは日本時間で1日1回です。まずは 21st.dev で1本触ってみて、続きはカタログで選んでください。