Internal · Wellness & Heritage Experience Brief

THE PRANA SEQUENCE — Authentic Indian Yoga Prompts

Reusable asset generation guide and master Claude Code specification for THE PRANA SEQUENCE (Surya Namaskar): an Awwwards-caliber interactive meditation experience built with Next.js 15, GSAP ScrollTrigger, Lenis, and synchronized breathing animations. Click Copy on either card to grab the prompt text.

5 Reusable 10s Videos & 3 Master Image Prompts Media Prompts · Google Flow / Midjourney Asset Suite

Complete set of 5 reusable 10-second cinematic videos and 3 editorial images designed to be pinned, reversed, scrubbed, and looped across the entire website.

5 Reusable 10s Videos & 3 Master Images for "THE PRANA SEQUENCE"

With a limit of 5 videos (max 10s each) and 3 images, every asset is designed to be trimmed, reversed, scrubbed, pinned, and looped with GSAP/Lenis.

==================================================
VIDEO PROMPTS (Google Flow / Runway Gen-3)
==================================================

VIDEO 01 (Hero) — "The First Breath"
Duration: 10 seconds | Used in: Hero, Intro, Loading transition
Prompt:
Create an ultra-cinematic 10-second film set at dawn in the Himalayan foothills, inspired by authentic Indian yoga traditions. A lone yoga practitioner dressed in handwoven off-white cotton stands facing the rising sun on a natural stone platform. The camera performs a slow forward dolly as warm saffron sunlight breaks over the mountains. The practitioner begins the opening movement of Surya Namaskar with calm, deliberate breathing. Fine mist drifts through the air, golden dust particles shimmer in volumetric light, and the fabric moves gently in the breeze. The atmosphere should feel sacred, peaceful, and timeless. Editorial luxury aesthetic, ARRI Alexa 65 look, natural colors, ultra-realistic, no text, no logos, no modern objects, 16:9.

---

VIDEO 02 (Pinned Scroll Animation) — "The Complete Surya Namaskar"
Duration: 10 seconds | Used in: Pinned scroll section, Teacher Training transition, Background loops
Prompt:
Create a seamless 10-second cinematic animation showing a single authentic Indian yoga practitioner performing the complete twelve classical Surya Namaskar postures in one continuous uninterrupted sequence. The camera remains perfectly locked in position throughout the animation with identical framing, lighting, and background. The environment is a Himalayan sunrise with warm saffron light, soft mist, and subtle floating dust. Each transition between poses is perfectly fluid so the video can be scrubbed frame-by-frame using scroll interaction. Realistic anatomy, elegant movement, premium documentary quality, no text, no camera cuts, no zooms, no modern gym environment.

---

VIDEO 03 (Exploded Prana Sequence) — "Inside the Breath"
Duration: 10 seconds | Used in: About section, Philosophy section, Scroll reveal
Prompt:
Create a premium scientific-meets-spiritual visualization of an authentic yoga practitioner performing Surya Namaskar. As the movement progresses, the human body slowly separates into beautifully aligned floating anatomical layers including skin, muscles, bones, lungs, heart, and spine. A luminous golden stream representing Prana flows through the spine and expands with every inhale before contracting with every exhale. Every anatomical layer remains perfectly aligned while floating apart in slow motion. Warm sunrise lighting, dark cinematic background, luxury Apple keynote quality, museum-grade realism, subtle camera orbit, no text.

---

VIDEO 04 (Retreat Journey) — "Living the Practice"
Duration: 10 seconds | Used in: Retreats, Workshops, Contact transition
Prompt:
Produce a cinematic 10-second journey through an authentic Indian yoga retreat at sunrise. Begin with a slow aerial reveal of Himalayan mountains before descending toward a handcrafted yoga shala built from natural stone and wood. Transition smoothly past students practicing yoga, close-ups of meditation, hands adjusting posture, incense smoke, flowing river, handmade cotton mats, brass singing bowls, and a peaceful diya glowing beside a lotus. The lighting remains consistently warm and golden with gentle camera movement and no abrupt cuts. Premium documentary realism, luxury wellness brand aesthetic, no text.

---

VIDEO 05 (Ending Loop) — "The Breath Returns"
Duration: 10 seconds | Used in: Footer, Contact, Infinite background loop
Prompt:
Create a peaceful cinematic closing scene beginning with a glowing diya beside a folded cotton yoga mat on natural stone. Soft incense smoke rises slowly while warm sunrise light illuminates floating dust particles. A subtle golden Prana energy gently circles the diya before transforming into a glowing circular breathing pulse that expands and contracts rhythmically. Finish with the rising sun over distant Himalayan peaks. Minimal composition, ultra-realistic, premium luxury cinematography, no text, perfect looping ending.

==================================================
IMAGE PROMPTS
==================================================

IMAGE 01 — Hero Poster (Used for: Hero fallback, Social sharing, Loading screen)
Prompt:
Ultra-realistic editorial photograph of a lone Indian yoga practitioner standing in Tadasana on a natural stone platform overlooking the Himalayan mountains at sunrise. Warm turmeric gold, saffron mist, and soft ivory tones dominate the palette. Fine morning fog, subtle volumetric sunlight, authentic Indian atmosphere, premium luxury wellness branding, large negative space for typography, no text, no modern buildings, 8K.

---

IMAGE 02 — Exploded Prana Artwork (Used for: About section, Philosophy section)
Prompt:
Hyper-realistic exploded anatomical visualization of a yoga practitioner in Surya Namaskar. Skin, muscles, bones, lungs, heart, and spine float in perfectly aligned layers while glowing golden Prana flows through the body's central channel. Dark cinematic background with warm sunrise rim lighting. Scientific precision blended with Indian spiritual symbolism. Museum-quality digital art, ultra-detailed, no labels, no text.

---

IMAGE 03 — Course Cards Collection (Used for: All three Teacher Training cards)
Prompt:
Create a premium editorial composition featuring three handcrafted symbolic objects on a warm ivory background: an exploded white lotus flower representing foundational practice, an illuminated human spine with flowing golden Prana representing advanced inner awareness, and an intricately carved sacred mandala representing mastery. Each object is isolated with generous negative space, softly lit by warm sunrise light, rendered with ultra-realistic textures and luxury product-photography quality. No text, no borders, 8K.

==================================================
ASSET MAPPING MATRIX
==================================================
| Website Section | Asset |
|---|---|
| Hero | Video 1 (The First Breath) |
| Scroll-controlled Surya Namaskar | Video 2 (The Complete Surya Namaskar) |
| About / Prana Philosophy | Video 3 (Exploded Prana Sequence) |
| Teacher Training | Image 3 (Course Cards Collection) |
| Retreats | Video 4 (Retreat Journey) |
| Workshops | Video 4 (Trimmed segments) |
| Contact | Video 5 (The Breath Returns) |
| Loading / Fallback | Image 1 (Hero Poster) |
| About Background | Image 2 (Exploded Prana Artwork) |
THE PRANA SEQUENCE Website Specification (Claude Code Prompt) Website Brief · Next.js 15 / GSAP ScrollTrigger / Lenis

Master developer prompt instructing Claude Code to build THE PRANA SEQUENCE with Next.js 15 App Router, GSAP ScrollTrigger frame-by-frame scrubbing, Lenis, SplitType typography, and breathing rhythm choreography.

You are an award-winning frontend engineer and creative developer specializing in Awwwards-level experiences.

Build a premium cinematic website called

THE PRANA SEQUENCE
(Surya Namaskar)

The website should feel like an interactive meditation instead of a traditional website.

==================================================
1. TECH STACK & DEPENDENCIES
==================================================
• Next.js 15 App Router
• React 19
• TypeScript
• TailwindCSS
• GSAP 3 & GSAP ScrollTrigger
• Lenis Smooth Scroll
• Framer Motion
• SplitType
• No animation libraries except GSAP & Framer Motion.

==================================================
2. DESIGN LANGUAGE & COLOR PALETTE
==================================================
- Aesthetic: Minimal, Luxury, Indian Heritage, Editorial, Breathing, Natural, Warm.
- No glassmorphism, no neon, no harsh gradients.
- Generous whitespace, warm ivory backgrounds, soft shadows, large editorial typography.
- Typography: PP Editorial / Canela style headings paired with Inter body copy.
- Palette:
  * Warm Ivory: #F8F4EE
  * Sand / Gold Light: #F2E4C8
  * Turmeric Gold: #D6A95D
  * Raw Terracotta / Ochre: #B46A2B
  * Deep Charcoal: #2D241F
  * Accent: Warm Saffron

==================================================
3. SCROLL EXPERIENCE & MEDITATIVE PACING
==================================================
The entire website should feel synchronized with breathing. Every scroll movement is slow and deliberate. Sections fade smoothly into one another using long pinned sections and buttery easing curves.

==================================================
4. SECTION-BY-SECTION BUILD SPEC
==================================================

HOME / HERO:
- Media: `Practitioner_performing_Surya_Namaskar.mp4` (`hero-video-1`).
- Pinned section where video covers the viewport.
- Large editorial overlay: "THE PRANA SEQUENCE" with subheading "Authentic Yoga rooted in Indian Tradition."
- Breathing Circle below hero expanding and contracting continuously.
- On scroll, video scrubs frame-by-frame using GSAP ScrollTrigger without autoplay after leaving hero.

SECTION 2 — ABOUT & PHILOSOPHY:
- Pinned section using `Yogis_performing_Surya_Namaskar.mp4`.
- Parallax text blocks: Left heading "Ancient Wisdom", Right body explaining Prana & Surya Namaskar.
- Line-by-line paragraph reveals on scroll with subtle upward word fade.
- Video scales slowly from 1.15 to 1.0 during the scroll sequence.

SECTION 3 — TEACHER TRAINING:
- Minimal cream cards: "200 Hour", "300 Hour", "500 Hour".
- Cards stagger upward while scrolling with soft lift hover, gentle shadow, and image zoom.

SECTION 4 — RETREATS:
- Pinned split layout using `Yoga_retreat_at_sunrise.mp4`.
- Left: Huge heading "RETREATS".
- Right: Large scaling video with overlapping foreground cards sliding across ("Himalayan Retreat", "River Meditation", "Sunrise Immersion").

SECTION 5 — WORKSHOPS:
- Dark warm background using `Yoga_teacher_guiding_students.mp4`.
- Horizontal scrolling cards ("Breathwork", "Alignment", "Meditation") with 1° hover rotation.

SECTION 6 — TEMPLE TRANSITION:
- Pinned full-viewport exploding temple architecture (`Temple_architecture_separates.mp4`).
- SplitType quote animates independently: "The body is your temple. Breath is your guide."

SECTION 7 — CONTACT & FINALE:
- Still image `Yoga_retreat_journey_at_sunrise.jpeg` with large breathing CTA "Begin Your Practice".
- Button "Book Your Journey" with soft glow, slight scale, and fill animation.
- Minimal footer with Instagram, Email, Location.

==================================================
5. PERFORMANCE & ARCHITECTURE
==================================================
- Reusable React components: `Hero.tsx`, `About.tsx`, `Courses.tsx`, `Retreats.tsx`, `Workshops.tsx`, `Temple.tsx`, `Contact.tsx`, `Loader.tsx`, `Navbar.tsx`, `Footer.tsx`.
- Hooks: `useLenis.ts`, `useScrollAnimations.ts`.
- Video preloading only for hero; lazy loading for subsequent video assets.
- 60fps GPU acceleration using `transform` instead of `top`/`left`.

Deliver clean, production-ready TypeScript code honoring authentic Indian yoga through restrained, elegant motion.
← Back to Prompt Library