Silk Field
Domain-warped light that pours like liquid silk, with an optional glass lens that refracts the flow under your cursor.
BackgroundsWebGLCursorAmbient
Vitrine · 301 components
A curated collection of React components chosen for how they move, react and feel. Open one, read the source and the prompt behind it, and make it yours.
Domain-warped light that pours like liquid silk, with an optional glass lens that refracts the flow under your cursor.
BackgroundsWebGLCursorAmbient
An object mounted under glass: hover lifts the pane with a sweep of reflection and swings out a paper catalogue tag.
CardsHoverCursorKeyboard
An async button with a camera iris for a status light — blades close and turn while it works, then open onto the result.
ButtonsClickKeyboard
Featured
A solid plate that fractures from one impact point, cracks racing outward as the shards drift apart.
ButtonsHoverKeyboard
A capsule of glass that bends what's behind it, carries a specular highlight around its rim toward your pointer, and squashes like a drop of liquid when pressed.
ButtonsHoverCursorClick
A liquid-glass pill that senses you coming: its rim light turns to face the cursor and the pill leans in to meet it.
ButtonsCursorHoverClick
Smoked-glass link cards: colour pooled in the corners, slow contour currents underneath, a field that leans toward you.
CardsCursorHoverAmbient
An editorial event plate with an oversized date and an orbital eclipse bleeding in from the right, alive with slow drift.
CardsCursorHoverAmbient
A living weather map — contour lines traced over a drifting pressure field, with your cursor as a system of its own.
BackgroundsCanvasCursorAmbient
Categories
Actions that answer back — shatter, trace, lean, hold.
Browse
Checkboxes, switches, segments and loaders, given the same care as the big pieces.
Browse
Containers treated as objects, with a point of view about what they hold.
Browse
Atmosphere you can set type on — shaders, fields, contours, light.
Browse
Small moments of feedback — likes, saves, copies, sends — each with one precise motion.
Browse
Pointers with a point of view: they light, frame, measure, write and keep company.
Browse
Type that moves with intent — flaps, ink, chrome, gravity and second thoughts.
Browse
Composers, attachments, model pickers and the small states around a conversation.
Browse
App and conversation sidebars that stay out of the way until you need them.
Browse
The first screen: a name, a promise and one action, each with a reason to be there.
Browse
The first thing anyone sees. Calm to use, memorable to look at.
Browse
Tabs, indexes and steppers that show where you are and where you're going.
Browse
Dialogs, sheets and popovers that keep you oriented while they're open.
Browse
Search, tables and dense information, kept readable.
Browse
Endings that close the page properly instead of dumping a sitemap.
Browse
Plans you can compare at a glance, without three identical cards.
Browse
Questions and answers where typography and spacing do most of the work.
Browse
Calls to action built on composition and focus rather than gradients.
Browse
Sign-in flows that stay practical under the polish.
Browse
Numbers presented so the change, not just the value, is visible.
Browse
Charts that read at a glance and reward a closer look.
Browse
Galleries, comparisons and image moments that reward a closer look.
Browse
The world, drawn in dots and arcs — routes, activity and places.
Browse
Inputs and fields with careful focus, validation and states.
Browse
Toasts and notices that tell people what just happened, calmly.
Browse
Whole page moments: testimonials, stories, showcases.
Browse
Names, wordmarks and titles set with intent.
Browse
Workshop
Whole pages made only from these components, each with a brief to build your own, and the skills we use to check our work.
Open the workshopIf something here earned a second look, a star helps others find it.
Star on GitHub