Desire Path

Qué incluye

Prompts

HTML · 543 líneas / React · 562 líneas

Medios

Imagen de fondo · Escena WebGL · Canvas

Alojamiento

cdn.orbital.supply, ya incluido en el prompt

Tipografías

Wix Madefor Display + Wix Madefor Text + DM Mono · Google Fonts

HTML

Un archivo · gsap 3.15.0 + ScrollTrigger (jsDelivr) · lenis 1.3.26 (jsDelivr) · desire-engine-v1 (CDN ES module)

React

react 19.3.0 · vite 8.3.2 · typescript 6.0.3 · tailwindcss 4.3.3 · gsap 3.15.0 (+ ScrollTrigger) · @gsap/react 2.1.2 · lenis 1.3.26 · desire-engine-v1 (CDN ES module)

Movimiento

grain-reveal, printed-headline, route-draw, pointer-lens

Probada y documentada

14 de octubre de 2026

• Reproducida en Claude
• Revisada a 375, 768, 1440, 1920 px
• Revisor de la spec: 0 errores, sin enlaces a generadores

Cómo usarla

1. Claude

   Pega el prompt de HTML en un chat nuevo. Obtienes un index.html para servir por HTTP o publicar donde quieras.

2. Vite + React

   Abre un proyecto vacío de Vite + React y pega el prompt de React. Indica los paquetes exactos; las URLs de los recursos ya están dentro.

El prompt

Extracto / 562 líneas en el prompt completo

# Build: "Desire Path" — a product studio site printed in film grain, from an idea to working software

## 0. Brief

Desire Path is a fictional product studio that takes an idea to working software in six weeks. A desire path is the line people tread across grass when the paved route takes too long; the page is that path. One WebGL engine prints every photograph and painting live as coloured grain. The grain gathers into the opening meadow and prints the headline. It dissolves four paintings of one valley into each other and splits an aerial view into idea (rough grain) and software (clean). Full-bleed scenes alternate with pale editorial sheets that slide over the chapter before them. A surveyor's frame, mono chips and lichen calls to action hold it together, and it ends on a sage footer with wildflowers. Calm, grounded, exact.

El prompt completo se desbloquea en el lanzamiento.