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 $79 with a commercial license.

Next.jsTypeScriptTailwind CSSThree.js

$79

one end product

Live demo ↗

Buy source — $79

Specifications

Framework: Next.js · TypeScript · Tailwind
Motion: Three.js + glTF variants
Category: Commerce
Use case: E-commerce
Responsive: Desktop → mobile
License: Commercial · one end product
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? That’s the $79 download.

# 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 — is $79, delivered as an instant ZIP with a commercial license for one end product.

Can I use Aero for a client project?

Yes. The $79 download includes a commercial license to use Aero in one end product, 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.