Prism

Run this with Claude Code to build your own Prism variant — free. Want the exact, tested code shown in the demo? That’s the $79 download.

# PRISM — Free Claude Code Prompt

*From SmartDuke Studio (studio.smartduke.com). This is the real prompt
behind our PRISM template — run it with Claude Code and build your own
variant. Want the exact, tested code with the assets, config file and
every fix already in? That's the paid download: 
https://studio.smartduke.com*

---

## Before you start

1. **Generate 6 fashion photographs** (any AI image tool), portrait
   4:5, same model + garment + location across all six or the effect
   falls apart. Shot list: ① full-body opener, facing camera ② mid-motion
   turn ③ fabric macro ④ backlit silhouette ⑤ the one color-accent piece
   ⑥ walking away. Plus **one landscape ~16:9 shot** for the full-bleed
   section.
2. Put them in `public/look/1.jpg … 6.jpg` + `7.jpg` (the wide one),
   and note each image's pixel dimensions — you'll need them.
3. Node.js ≥ 20.9.

## The prompt

Paste into Claude Code in an empty folder:

> Build me an Awwwards-grade fashion lookbook website for a fictional
> avant-garde fashion house. Dark editorial: near-black ink background,
> bone type, ONE amber accent. Fonts: Cormorant Garamond (light,
> uppercase + italic display) + Jost (body), via next/font.
>
> **Stack:** Next.js App Router + TypeScript + Tailwind v4 + **OGL**
> (the 8KB WebGL library — NOT three.js) + GSAP ScrollTrigger +
> SplitText + Lenis smooth scroll.
>
> **Architecture — "the cloth engine" (this is the whole trick):**
> ONE fixed fullscreen WebGL canvas behind the page. Do NOT build a
> fullscreen image slideshow. Instead: any DOM element with
> `data-cloth="N"` becomes a WebGL plane pinned to that element's
> `getBoundingClientRect()` every frame (orthographic camera in pixel
> space; plane geometry 1×1 scaled to the rect, ~24×24 segments). The
> page layout is normal HTML/Tailwind — the planes just paint the
> imagery. My six photos live in /public/look/ (I'll give you exact
> pixel dimensions — put image sizes in a config so cover-crop math
> works per image).
>
> **Shader behavior:**
> - Vertex: planes BOW with smoothed scroll velocity, like cloth
>   catching air — `p.y += sin(uv.x * π) * uVel * -0.05`.
> - Fragment: cover-fit crop (respect each image's aspect; support a
>   vertical crop-bias uniform — and note WebGL's v-axis points UP),
>   cursor ripple (rings from the pointer, driven by per-element
>   mousemove in plane-UV space), a subtle chromatic split driven by
>   scroll velocity (CLAMP it hard — velocity arrives in px/frame and
>   uncapped it goes psychedelic), a photographic grade (slight
>   desaturation, +contrast, cold shadows / warm highlights), film
>   grain, and a soft edge falloff inside each plane.
> - The COVER plane (`data-melt`) additionally melts between looks on
>   its own clock (every ~4.5s): two textures + a uMix, with an
>   fbm-noise front so garments dissolve into each other, never cut,
>   with a faint amber edge along the melt front.
>
> **Layout — an editorial magazine issue, type on solid ink (never
> over the photos except one controlled moment):**
> 1. Cover: huge serif masthead, thin rule + edition line in amber,
>    the melting cover plane (4:5, ~440px) with vertical plate-notes,
>    short intro, scroll cue.
> 2. Three alternating spreads: image plane one side (with slow GSAP
>    parallax drift), on the other a huge two-line serif title (second
>    line italic), eyebrow, one paragraph, price + "Enquire" link. A
>    giant ghost numeral (30vw, 5% opacity) slides horizontally behind
>    each spread via scrub.
> 3. One full-bleed sticky section using my LANDSCAPE shot
>    (`data-cloth` for image 7): a three-line manifesto centered over
>    it with a soft radial dark pool behind the text; then a 3-column
>    "vows" band on ink.
> 4. A 6-frame film strip (all looks, hover lifts the frame — cursor
>    ripple makes them answer).
> 5. Close: "Forty coats. That is all." style statement + stockists +
>    mailto CTA + big footer wordmark.
>
> **Motion:** Lenis (never CSS scroll-behavior:smooth alongside it),
> SplitText line reveals, respect prefers-reduced-motion (pause melt
> and idle clocks). Keep 60fps: skip rendering planes far off-screen.
>
> Put ALL copy, look names/fabrics/prices, brand info and image paths
> + dimensions in one `src/config.ts` so I can re-skin it in one file.

## Gotchas (we hit all of these so you don't)

- **Velocity clamp:** scroll velocity is px/frame. Scale ~0.01 and
  clamp the chromatic split ≤ 0.007 or a wheel-flick looks broken.
- **Crop bias sign:** WebGL's texture v-axis points up. If your wide
  crops show feet instead of faces, your bias sign is flipped.
- **Mid-grey photos + `mix-blend-difference` text = invisible text.**
  Don't try it. Compose type on the background instead.
- **Tailwind v4 + Turbopack** caches `@theme` tokens — after renaming
  color tokens, delete `.next/` and restart.
- **Same-model imagery** is what makes the melt read as one
  collection. Six random photos = expensive-looking slideshow.

---

*Built something with this? Tag @smartduke — we feature the best runs.
And when you want the exact tested build (assets, config, README,
license, updates): studio.smartduke.com — single template $79, or
everything we've ever made for $199.*

Prism — questions

Related templates

Part of