E-commerce · Featured
Aero
Aero is a premium e-commerce website template built with Next.js, TypeScript, Tailwind and Three.js + glTF variants. A 3D product stage that photographs its own lookbook. The Claude Code prompt that builds it is free; the exact tested source code is unlocked by Studio Access — $149 for every template on the shelf, with a commercial license for unlimited projects.
Unlocked by Studio Access — all 19 templates, every future drop, unlimited projects. $149 once.
Specifications
- Framework
- Next.js · TypeScript · Tailwind
- Motion
- Three.js + glTF variants
- Category
- Commerce
- Use case
- E-commerce
- Responsive
- Desktop → mobile
- License
- Commercial · unlimited projects
- Delivery
- Instant ZIP download
What the paid download adds
- The exact deployed code — tested, not AI-guessed
- Config-driven copy, palette & assets
- Compressed media included
- Deploy README — Vercel or your own VPS
- Commercial license — one end product
- Free updates to this template
The free Claude Code prompt
Run this with Claude Code to build your own Aero variant — free. Want the exact, tested code shown in the demo? It’s in Studio Access, with every other template.
# AERO — Free Claude Code Prompt
*From SmartDuke Studio (studio.smartduke.com). Run it with Claude Code
and build your own variant. Want the exact tested code — compressed
model, config, the fixes — that's the paid download at
https://studio.smartduke.com*
## Before you start
- Node.js ≥ 20.9.
- The product model is free: **MaterialsVariantsShoe.glb** from the
Khronos glTF-Sample-Assets repo on GitHub (© Shopify, CC-BY 4.0 —
credit it in your footer). Compress it first:
`npx @gltf-transform/cli resize --width 1024 --height 1024 in.glb tmp.glb`
then `npx @gltf-transform/cli webp tmp.glb public/models/shoe.glb`
(7.5MB → ~1MB).
## The prompt
> Build me a premium 3D sneaker launch page, Awwwards-level, for a
> fictional brand. Target ~1MB payload, 60fps, NO postprocessing.
>
> **Stack:** Next.js App Router + TypeScript + Tailwind v4 + vanilla
> Three.js (no React Three Fiber) + GSAP ScrollTrigger + Lenis.
>
> **The stage:** one fixed transparent-background canvas behind the
> DOM. Load /models/shoe.glb, center + normalize scale, idle float
> bob. Light with PMREMGenerator + RoomEnvironment (IBL is what makes
> PBR materials read as real) + one key directional. Fake the ground
> shadow with a radial-gradient canvas texture on a plane — no shadow
> maps.
>
> **Scroll choreography:** drive camera position and shoe rotation
> through keyframes over scroll progress (write a small stops-lerp
> helper): hero pose under colossal display type → side profile beside
> a features list → macro close-up on the material → pulled WAY back
> and low for the colorways act (product must not cover the section
> text) → banked aside for the buy section. Lerp progress ~0.07.
>
> **Signature — colorways that retint the whole site:** the glb has 3
> material variants (KHR_materials_variants — follow three.js's own
> webgl_loader_gltf_variants example: mesh.userData.gltfExtensions →
> mappings → parser.getDependency('material', idx)). Map variants **by
> NAME, not index** (order in the file is not display order), and set
> the initial variant to match your landing palette. On switch: swap
> materials live, kick a 360° spin flourish, and GSAP-tween CSS custom
> properties on <html> (--wash/--ink/--accent) that the entire
> Tailwind theme reads — the whole page recolors with the product.
> Sync switchers via one shared function + a window CustomEvent: a
> floating swatch dock in the hero (labels expand on hover — put
> `items-start` on the flex column or buttons stretch to the widest),
> the big colorways section, and a sticky pill buy-bar.
>
> **The lookbook (killer feature):** after the model loads, photograph
> it with the main renderer — six poses, setSize(640,800) at DPR 1,
> render each with a dedicated camera, toDataURL('image/webp'),
> restore size — all in one synchronous task so nothing flickers.
> Display as a photography grid; re-shoot (debounced) on every
> colorway switch. Await the variant material promises before
> shooting.
>
> **Sections:** hero (huge condensed type overlapping the shoe +
> spinning circular SVG-text badge + benefits ticker), features index,
> material macro, lookbook, colorways, press quotes, buy module (US
> size grid + colorway-aware mailto CTA), sticky buy bar, footer with
> the CC-BY model credit. Kinetic marquees between acts (gsap
> xPercent -50, repeat -1, duplicated span).
>
> Put all copy, prices, palette per colorway in one config file.
## Gotchas
- **IBL or it looks like plastic** — RoomEnvironment + envMapIntensity
~0.7–1.0 on the PBR materials.
- Variant **names** in this glb: midnight / beach / street. Match by
name; index order differs.
- Never set CSS `scroll-behavior: smooth` alongside Lenis.
- Tailwind v4 `scale-*-0` classes use the CSS `scale` property — they
MULTIPLY with inline `transform: scale()` (net zero). Own transforms
inline on scroll-driven fills.
---
*The paid version: exact tested build, compressed model, config-driven
everything, README + license — studio.smartduke.com*
Aero — questions
What is the Aero template built with?
Aero is a E-commerce website built with Next.js, TypeScript, Tailwind CSS, Three.js. The motion is driven by Three.js + glTF variants, with Lenis smooth scrolling and GSAP ScrollTrigger for the scroll choreography.
How much does Aero cost?
The free Claude Code prompt that builds a Aero variant is $0. The exact, tested source code — the same site shown in the demo — comes with Studio Access: $149 once for every template plus every future drop, delivered as instant ZIP downloads with a commercial license for unlimited projects.
Can I use Aero for a client project?
Yes. Studio Access includes a commercial license to use Aero — and every other template — in unlimited end products, including paid client work. Everything is config-driven, so copy, palette and assets re-skin from a single file.
What's the difference between the free prompt and the paid download?
The free prompt gets Claude Code to build you a Aero variant — genuinely good, but it costs tokens and debugging time and results vary. The paid download is the exact site in the demo: tested, compressed, documented, licensed, with free updates.
Related templates
Part of
Unlock Aero — and everything else.
The free prompt gets you a variant. One Studio Access licence unlocks this exact tested site, the other 18 on the shelf, and every future drop — $149 once, unlimited projects.