Clean-room studies of Awwwards winners: design tokens, motion specs with code, and a runnable rebuild of each.
A teardown, not a template.
Great sites are hard to describe in adjectives. Each study measures one and writes it down, so people and coding agents can reuse the thinking instead of the pixels.
Design tokens
Colour, type, spacing and easing as values you can paste into a stylesheet.
Motion spec
Every effect as trigger, animation, duration and curve, with the code that drives it.
Live rebuild
A runnable Vite project written from scratch, with placeholder copy and open-licence assets.
The studies
-
webgl, scroll-pinning, text-reveal
-
webgl, hover-focus, scroll-curtain
-
entry-gate, scroll-pinning, horizontal-scroll
-
webgl, 3d-carousel, scroll-timeline
-
scroll-pinning, frame-sequence, smooth-scroll
-
pinned-slideshow, clip-path-wipe, cursor-parallax
-
text-reveal, scroll-scrub, parallax
-
webgl, camera-path, scroll-driven
-
webgl, shader, 3d-character
-
game, canvas, text-reveal
-
webgl, 3d-mascot, intro-loader
-
image-swap, scroll-pinning, scrub-zoom
-
webgl, shader, image-slider
-
webgl, shader, parallax
-
image-slider, clip-path-wipe, scroll-scrub
-
webgl, product-3d, scroll-choreography
-
smooth-scroll, scroll-pinning, parallax
-
type-specimen, scroll-scrub, smooth-scroll
-
webgl, shader, scroll-pinning
-
scroll-pinning, scroll-scrub, smooth-scroll
-
webgl, shader, 3d-object
-
scroll-pinning, text-reveal, smooth-scroll
-
webgl, shader, halftone
-
webgl, tilted-card-field, smooth-scroll
-
scroll-pinning, clip-path-reveal, text-reveal
-
parallax, text-reveal, smooth-scroll
-
webgl, shader, smooth-scroll
-
webgl, shader, game-as-landing-page
-
smooth-scroll, text-reveal, scroll-pinning
-
webgl, bento-grid, scroll-pinning
-
webgl, iridescent-material, camera-tween
-
scroll-pinning, scrubbed-parallax, horizontal-scroll
-
webgl, shader, wheel-driven-stages
-
scroll-driven-unfold, tile-mosaic-navigation, page-transitions
-
scroll-pinning, text-reveal, smooth-scroll
-
webgl, shader, flowmap
-
webgl, shader, scroll-pinning
-
webgl, post-processing, outline-shader
-
illustration, color-flood, scroll-pinning
-
webgl, shader, grain-gradient
-
webgl, shader, custom-scroll
-
loader, sticker-loader, scroll-pinning
-
webgl, particles, scroll-pinning
-
webgl, scroll-pinning, parallax
-
webgl, smooth-scroll, horizontal-scroll
-
scroll-scrub, odometer-text, blend-mode
-
webgl, shader, fog
-
webgl, shader, virtual-scroll
-
webgl, virtual-scroll, camera-path
-
scroll-pinning, text-reveal, smooth-scroll
-
webgl, age-gate, scroll-scrub
-
text-reveal, smooth-scroll, typography
-
webgl, 3d-model, scroll-pinning
No study matches that mix.
Install
Two skills, so you choose how much lands in your project. design-inspiration holds the studies. design-inspiration-rebuilds adds the runnable projects and is much larger.
$ npx skills add raphaelbleier/design-inspiration-skills$ /plugin install design-inspiration --marketplace raphaelbleier/design-inspiration-skills $ /plugin install design-inspiration-rebuilds --marketplace raphaelbleier/design-inspiration-skills