Aether

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

# AETHER — Free Claude Code Prompt

*From SmartDuke Studio (studio.smartduke.com). The real prompt behind
our living-world crypto template. The exact tested build — the spline
engine, the committed art direction, every rebuild lesson — is the
paid download: https://studio.smartduke.com*

## Before you start

- Node.js ≥ 20.9. Zero external 3D assets — everything is procedural.
- pmndrs `postprocessing` package for the render pipeline.

## The prompt

> Build a crypto / DeFi website that is a LIVING WEBGL WORLD you travel
> through, not a dashboard you read — Awwwards emotional-experience
> style. The user flies through a stylized landscape; each region is a
> product feature. Bricolage Grotesque + Figtree; deep dusk palette
> into night.
>
> **Stack:** Next.js + TS + Tailwind v4 + vanilla Three.js + pmndrs
> `postprocessing` (EffectComposer HalfFloatType, SMAA, BloomEffect
> mipmapBlur intensity ~0.9 threshold ~0.5, VignetteEffect,
> NoiseEffect COLOR_DODGE ~0.05, ACESFilmic) + GSAP + Lenis.
>
> **Architecture — ONE spline drives everything (this is the whole
> design).** A single THREE.CatmullRomCurve3 winds through the world.
> Do NOT keyframe-teleport the camera between scenes. Instead:
> - The VALLEY is carved along the curve — terrain height = ridged-fbm
>   noise × a distance-to-path mask (sample the curve to ~400 points,
>   distToPath(x,z) returns the nearest). Low-poly: build the plane,
>   displace, `toNonIndexed()`, `flatShading:true`, jitter per-face
>   vertex colors, computeVertexNormals — committed flat-shaded
>   stylization beats failed realism.
> - A glowing RIVER OF LIGHT is ribbon geometry extruded along the
>   curve (per segment: point + tangent × up = side offset), with a
>   flowing-pulse additive shader.
> - ~1400 PARTICLES advance along the curve (each has a 0..1 path
>   param that increments and wraps) — visible liquidity streaming
>   downstream.
> - The CAMERA dollies the same curve continuously: scroll fraction =
>   path param, camera at getPointAt(t), looking at getPointAt(t+0.045).
>   No teleports, ever.
> - Ambience lerps by CONTINUOUS gradient functions of the same
>   fraction (sky dome colors, fog color, sun color + intensity, star
>   opacity, aurora opacity, exposure) — write GRAD (color-stop) and
>   numG (number-stop) helpers.
> - Landmarks along the path: waypoint octahedron crystals with halos,
>   an end portal (torus + glow sprite).
> - Painterly SKY dome shader, additive AURORA curtain planes (GLSL
>   fbm), firefly/star glow sprites.
>
> **Each region = one feature** (river = swaps, range = staking,
> aurora = yield, constellations = governance). DOM sections
> ([data-scene]) with oversized type, glass chips, gradient CTA — over
> a fixed legibility scrim (top/bottom gradient) so text survives
> bright skies.
>
> 60fps: antialias:false (SMAA handles it), DPR ≤ 1.75.

## Gotchas

- Keep the physical sun/glow 40°+ off the camera axis — low sun +
  bloom = full whiteout.
- SplitText line MASKS clip text-shadow glows into visible rectangles
  — reveal WITHOUT masks when using a glow.
- Commit to the flat-shaded low-poly look. Half-hearted realism reads
  as programmer art; the stylization is the point.
- Continuous spline motion >> keyframed scene jumps. It's the
  difference between "half-baked" and "real flow".

---

*Paid version: the full spline engine + post pipeline + README/license
— studio.smartduke.com*

Aether — questions

Related templates

Part of