Marionette is a single-column landing page template built for intimate puppetry and children's theater companies. It opens with a cinematic short-form reel, draws visitors through three narrative acts, and closes with a seat-reservation form. The dark theatrical design, animated puppet gallery, and visual show calendar work together to make visitors feel the performance before they book.
by Rocket studio
Loading preview…
Quick summary
Marionette is a dark, immersive single-column landing page for puppetry and children's theater. It moves visitors through a short film reel, a company introduction, an animated puppet gallery, and a visual show calendar before presenting a seat-booking form. Every section is designed to build anticipation so that by the time the form appears, the visitor already feels like part of the audience.
Who this template is for
This template is built for small and intimate performing arts companies that rely on in-person attendance. It suits businesses where the atmosphere of the show is the main selling point.
Puppetry and children's theater companies promoting ticketed shows
Birthday party planners and school coordinators seeking a dedicated booking inquiry path
Independent performing arts producers who want a storytelling-first landing page
What problem this template solves
Most event pages lead with a form or a ticket price. That approach works poorly for intimate theater, where the experience itself is the reason to attend. Visitors who have never seen the show need to feel it first.
Generic event pages fail to convey atmosphere, leaving parents uncertain about what their child will experience
School coordinators and birthday planners often leave pages that offer no clear group-inquiry path
A flat design undercuts trust for a tactile, sensory-led performance product
What you get with this template
You get a fully structured single-column landing page designed around theatrical narrative pacing. Every section serves a specific role in the visitor journey, from first impression to confirmed seat.
A cinematic 15-second hero reel section with a poster fallback for slow connections
An animated puppet gallery with per-card micro-loops and tap-to-hear audio snippets
A visual show calendar with scroll-triggered date reveals and a seat-booking form with a puppet ticket counter
Feature list
Theme
Dark Immersive
Creative direction
Sound & Rhythm
Color system
Sunset Gradient
Style
Single Column Flow
Direction
Event Registration
Page Sections
Cinematic Short-form Hero Reel
Scroll-triggered Staggered Reveals
Animated Puppet Gallery with Audio
Visual Show Calendar with Scroll Reveals
Seat-booking Form with Ticket Counter
Floating Call to Action and School Inquiry Path
Related questions
Who is this landing page template designed for?
Can I use this template for a single show or a full season of events?
Does the template support two different booking paths?
What if a visitor's connection is too slow to load the video reel?
Can I update the color palette to match my own brand?
A short paragraph introduces the feature set before the individual items below.
This template packs a high level of interactive and visual detail into a focused single-column flow. Each feature below is drawn directly from the template brief.
Cinematic Short-Form Hero Reel
The page opens with 15 seconds of intimate puppet footage cut to a heartbeat rhythm. The reel uses a poster image as a fallback so the page loads cleanly on slower connections. No voiceover plays, only the ambient sound of wooden joints, a kalimba note, and a single collective gasp.
Scroll-Triggered Staggered Reveals
The first act uses GSAP ScrollTrigger to deliver percussive, staccato content reveals. Text lines and images land like drumbeats as the visitor scrolls. This pacing mirrors a live performance opening and keeps attention focused.
Animated Puppet Gallery
The second act presents portrait cards for individual puppets. Each card carries a looping micro-animation, such as a blink, a hand wave, or a candle flicker. Visitors can tap each card to hear a brief audio snippet.
Visual Show Calendar with Musical Note Reveals
The third act displays upcoming show dates on a staff-style visual calendar. Dates appear like musical notes filling in as the visitor scrolls. This builds a sense of urgency and event scarcity naturally.
Seat-Booking Form with Puppet Ticket Counter
The primary booking form asks for the visitor's name, preferred show date, number of seats, and visit type (birthday party, school group, or family visit). A small puppet icon multiplies visually as seats are added, reinforcing the playful brand tone.
Floating "Save Our Seats" Call to Action
The horizon-pink call-to-action button appears first beneath the hero reel and then floats gently after the show calendar. A secondary link reading "Bring Us to Your School" connects to a shorter group inquiry form.
Page sections overview
Section
Purpose
Hero Reel
Opens the page with intimate puppet footage and the primary call to action
Act I: The Company
Introduces the theater through staccato copy and drumbeat image reveals
Act II: Puppet Gallery
Presents individual puppet portraits with micro-animations and audio
Act III: Show Calendar
Displays upcoming dates with scroll-triggered musical note reveals
Booking Form
Collects seat reservations with a puppet ticket counter and visit-type selector
School Inquiry Link
Offers a secondary path for group and school bookings
Social Proof
Displays parent testimonial quotes, attendance numbers, and school logos
Footer
Single linear row with essential links and contact information
Design & branding system
The visual identity uses a Sunset Gradient color system that moves from deep theatrical black through dusky plum to warm amber, with a final horizon pink reserved for buttons and highlighted show dates. The palette feels like watching a sky dissolve from dusk into night as the visitor scrolls deeper.
Colors: deep theatrical black (#1A1118), dusky plum (#4A2040), warm amber (#E8913A), and horizon pink (#F2786D) for all clickable elements
Typography: Fraunces serif for headlines delivers a handcrafted editorial feel; DM Sans handles all body text for clean readability
Style direction: dark theatrical, velvet immersive, candlelit editorial with high-animation GSAP parallax and staggered micro-loops throughout
Mobile & speed optimization
The template is built mobile-first, reflecting the reality that parents often browse on phones during a Saturday morning. Performance decisions were made to keep the experience smooth even on mid-range devices.
The video hero uses a poster image fallback so the page renders immediately while the reel loads
The puppet gallery uses lazy loading so images and audio assets do not block the initial page paint
The single-column layout reflows cleanly on small screens without losing the theatrical pacing or animation rhythm
How this template helps you convert
This template converts by earning trust before it asks for anything. The narrative structure moves visitors through the emotional experience of the show before the booking form ever appears.
The hero reel and Act I create immediate emotional immersion, making the visitor feel the atmosphere of a live performance within the first few seconds of arriving on the page.
The puppet gallery and show calendar build desire and urgency, giving parents, school coordinators, and birthday planners concrete reasons to act before seats fill up.
The floating call-to-action button and the dedicated school inquiry path ensure every visitor type has a clear, low-friction next step matched to their specific need.
Other information about this template
This template sits within the Media and Entertainment category, under the Theater and Performing Arts subcategory, with a specific focus on puppetry and children's theater. A few additional details about its configuration are worth noting.
The template is configured for English language, United States date format, and USD pricing
Animation is driven by GSAP ScrollTrigger for staggered reveals, parallax effects, and micro-loops across all acts
Social proof elements include parent testimonial quotes, show attendance numbers, and school logos placed to reinforce credibility
The intersection match score for this template's category, subcategory, and niche alignment is 13, indicating a tightly focused use case
The template style is Single Column Flow with a Dark Immersive theme, making it well suited to Framer, Webflow, or similar visual development platforms that support high-interactivity builds
