The Asana outdoor yoga landing page is a full-width immersive template built for event registration. It guides visitors through a scroll-driven morning class experience, from a hand-drawn animated forest clearing to a savasana stillness scene, before presenting a gentle sign-up form. The design uses a Forest Trust color palette and Studio Ghibli-inspired illustrations to earn trust before asking for the click.
by Rocket studio
Loading preview…
Quick summary
Asana is a full-width immersive landing page template for outdoor yoga class registration. A scroll-driven, day-in-the-life narrative moves visitors from a forest arrival to final savasana before presenting the sign-up form. Hand-drawn SVG illustrations, GSAP-powered animations, and a Forest Trust color palette create a sensory experience that builds emotional connection well before any call to action appears.
Who this template is for
This template suits wellness practitioners and small fitness businesses running outdoor or nature-based yoga classes. It is especially well-matched for instructors whose audience values experience over efficiency.
Yoga instructors offering morning or weekend outdoor classes to local communities
Wellness event organizers targeting burned-out professionals, new mothers, or active retirees
Gift-class sellers looking for a secondary conversion path alongside direct registration
What problem this template solves
Most fitness registration pages lead with logistics: dates, prices, and a button. That approach misses the emotional reason people sign up for outdoor yoga. This template solves the gap between "I saw a yoga class" and "I need to be there."
Visitors often leave registration pages before connecting with the experience being offered
Generic form-first layouts fail audiences who need to feel the value before committing
Standard templates cannot convey the sensory quality of an outdoor, nature-based practice
What you get with this template
You get a single-page event registration template structured around a cinematic scroll arc. Every section is purpose-built, from an animated hero to a dual-path sign-up form.
An animated SVG hero illustration with ink-line tree growth, watercolor light, and a vinyasa figure sequence
A five-scene morning journey section moving from forest arrival through warm-up, peak flow, cooldown, and savasana
A dual registration form with illustrated experience-level icons and a secondary gift-a-class email path
Theme
Healing Space
Creative direction
Day-in-the-Life
Color system
Forest Trust
Style
Full-Width Immersive
Direction
Event Registration
Page Sections
Animated SVG Hero Illustration
GSAP Scrolltrigger Scene Arc
Illustrated Registration Form
Sticky Registration Bar
Gift a Class Path
Accordion FAQ Component
Related questions
Can I use this template without coding knowledge?
Is this template designed for a single class or an ongoing schedule?
Can I remove the gift-a-class section?
Does the illustrated form work on mobile screens?
What makes this template different from a standard fitness registration page?
Feature list
This template includes a carefully considered set of features drawn directly from the design brief. Each one serves the core goal of helping a visitor feel the class before they register.
Animated SVG Hero Illustration
The header features a hand-drawn forest clearing that animates as the page loads. Ink-line trees grow upward, watercolor light pools onto yoga mats, and a illustrated figure moves through a slow vinyasa sequence. Tiny birds settle onto branches as the scene completes.
GSAP ScrollTrigger Narrative Arc
Scroll-driven animations power the day-in-the-life journey through five distinct morning scenes. Each scene deepens atmosphere rather than interrupting it, using parallax layers and animated wind through illustrated foliage.
Illustrated Registration Form
The primary "Find Your Clearing" form collects first name, preferred session day, and experience level. Experience level is presented as three illustrated icons: a sprouting seed, a growing sapling, and a rooted tree, making the form feel as considered as the rest of the page.
Sticky Registration Bar
A gentle sticky bar appears after the page midpoint and repeats the primary call to action. It stays present without disrupting the scroll experience, giving returning visitors a clear path to register without scrolling back up.
Gift a Class Path
A secondary conversion option lets visitors send a class to someone else. It requires only an email address, keeping the gifting flow as frictionless as possible while opening a second audience segment.
Accordion FAQ Component
An interactive accordion section handles common pre-registration questions. It keeps the page clean by hiding detail until a visitor actively requests it, reducing visual noise without removing useful information.
Page sections overview
Section
Purpose
Hero Clearing
Animated forest illustration cinematic reveal with headline
Who It's For
Three illustrated audience portraits with honest copy
Morning Journey
Five-scene scroll arc from arrival to savasana
Instructor Profile
Credibility and personal story to build trust
Student Testimonials
Three specific outcome-focused social proof quotes
Find Your Clearing
Primary registration form with illustrated icons
Gift a Class
Secondary gifting conversion path with email field
Footer
Single-row linear footer with essential links
Design & branding system
The visual identity follows a Healing Space theme built on the Forest Trust color system. Typography pairs Fraunces italic serif headlines with DM Sans body text, creating contrast between the poetic and the practical.
Color palette: deep canopy green (#2D4A22) for headlines, sunlit moss (#A8B865) for hover states and active buttons, warm bark brown (#6B4226) for body text, and soft morning mist (#F4F1EB) as the dominant background
Illustration style: Studio Ghibli meets botanical field sketch, hand-drawn, organic, and deliberately unhurried with intentional imperfection
Typography: Fraunces italic serif for all headline moments, DM Sans for body copy and form labels to keep readability high
Mobile & speed optimization
This template is designed desktop-first with full mobile responsiveness built in. Sharing behavior is a key consideration, since many registrants receive the page link on a mobile device.
Static page sections use server components to reduce load on initial render, while animation-heavy sections use client components to isolate interactivity
SVG illustrations and parallax layers are structured to adapt gracefully to smaller viewports without breaking the narrative arc
The sticky registration bar and illustrated form maintain full usability on mobile screen sizes
How this template helps you convert
The template earns the registration click through emotional pacing rather than pressure. By the time a visitor reaches the form, the scroll arc has already walked them through the full class experience.
The animated hero and five-scene journey lower resistance by letting the visitor feel present in the class before any ask appears, making the "Find Your Clearing" call to action feel like a natural next step rather than an interruption.
The sticky registration bar ensures the primary call to action is always reachable after the midpoint without forcing the visitor to scroll back, reducing drop-off at the moment of decision.
The gift-a-class path doubles the potential audience by converting visitors who are not registering for themselves into active referral sources with a single email field.
Other information about this template
This template was designed for the Wellness and Fitness category, specifically within the Outdoor and Nature Fitness subcategory for outdoor yoga class providers. It sits at the intersection of immersive storytelling and practical event sign-up.
The template style is Full-Width Immersive, prioritizing cinematic scroll depth over compact information density
The creative direction follows a Day-in-the-Life arc, a narrative structure well-suited to experience-led wellness offerings
The header concept is an Animated Illustration, distinguishing this template from photography-based fitness pages
The landing page direction is Event Registration, meaning all design decisions serve a single conversion goal
Localization is set for English, United States, with a Pacific Northwest cultural sensibility in the copy tone and visual atmosphere
