DesignLayer│React UI Library for Developers

Motion-first React sections ⚡
Preview live → copy into Cursor / Claude
New drops every week
動きのあるUIを、そのまま実装へ

[Shou | building DesignLayer @shouchan099]

A calm 404 page with an isometric SVG fish tank 🐟

[DesignLayer│React UI Library for Developers @DesignLayer47]

@imshodiyorbek Our video API was ignoring Range requests and always returning the full file. Safari needs 206 Partial Content responses to play videos, so it wouldn't start. Added Range support and it works now 🙌

[DesignLayer│React UI Library for Developers @DesignLayer47]

Fixed: videos in the DesignLayer gallery weren't playing on Safari and some other browsers. They should play everywhere now.

We also made pages much faster to load.

Thanks to everyone who reported it 🙏
https://t.co/EjDYETtAME

[Shou | building DesignLayer @shouchan099]

Ramya (@code_rams ) made this launch video with one AI prompt 🤯

It's now in the DesignLayer gallery, prompt included. Swap in your product and make your own 👇

https://t.co/FQ5uQTVm5T

[Shou | building DesignLayer @shouchan099]

New drop in the DesignLayer video gallery 🔥

@Mr_Buzzoni 's showreel. 24 seconds of pure motion, made by Opus 5.5 in stock Claude Code from one prompt.

Huge thanks for sharing it with us 🙏

Sound on.

[DesignLayer│React UI Library for Developers @DesignLayer47]

new on designlayer videos: kiln 2, a launch film for a product that doesn't exist. the prompt is on the page.

[Shou | building DesignLayer @shouchan099]

Kiln 2 doesn't exist. Its launch film does.

Every frame is code by Claude Opus 5.5. Sound on.

[DesignLayer│React UI Library for Developers @DesignLayer47]

The film in this post lives in the library too. Watch it here 👇
https://t.co/bPY5zV6Prb

[DesignLayer│React UI Library for Developers @DesignLayer47]

Introducing DesignLayer Videos

Launch films made with AI, each shipped with the prompt that made it. Copy the prompt, paste it into Claude Code, and get the film.

Official films and community submissions, free to watch. Made one? Submit it.

https://t.co/0RNsOHNyes

[DesignLayer│React UI Library for Developers @DesignLayer47]

First community video on DesignLayer Videos 🎬

@moritzkremb gave Claude Opus 5.5 a single prompt: make a SaaS launch video. It chose Notion, gathered real assets, and cut this 46s launch film.
Watch it and copy the prompt
👇 https://t.co/gvtRKYdkfB

[DesignLayer│React UI Library for Developers @DesignLayer47]

DesignLayer MCP is live.
#MCP #ClaudeCode #buildinpublic

[DesignLayer│React UI Library for Developers @DesignLayer47]

Before / After

[DesignLayer│React UI Library for Developers @DesignLayer47]

Launched DesignLayer 🚀

https://t.co/cDnJouki3x

[DesignLayer│React UI Library for Developers @DesignLayer47]

New motion added: Japan Travel Hero.
Pass it to Cursor — easy to drop into your project.
https://t.co/4KWSMNxEGD

[DesignLayer│React UI Library for Developers @DesignLayer47]

https://t.co/vIM4mFKuqK

[DesignLayer│React UI Library for Developers @DesignLayer47]

Added a new component: Path Drawing Portfolio Hero.
The screen stays dark and full-bleed. Your name draws itself in as a gradient stroke, letter by letter. A small label sits above; the tagline and scroll cue fade in below.

[DesignLayer│React UI Library for Developers @DesignLayer47]

Added a new component: Pin Spacer Works.

The screen stays pinned while you scroll, and your work photos fly in from the back, one at a time. The background blurs and crossfades to match the current photo.

#webdesign #GSAP #portfolio

[DesignLayer│React UI Library for Developers @DesignLayer47]

New part: Clicky Keyboard.

A Mac-layout keyboard you can actually type on. Click a key — or use your own keyboard — and you get that mechanical snap, plus a live key preview.

Drop it into a product or tech landing page.

https://t.co/V3rkhHb495

#ClickyKeyboard #UI #WebDesign

[DesignLayer│React UI Library for Developers @DesignLayer47]

Motion-first React sections ⚡
Preview live → copy into Cursor / Claude
New drops every week
動きのあるUIを、そのまま実装へ

#website #webdesign