Whodunit - Elegant Mysterysupply Landing Page Template

Quick summary

Whodunit is a single-page, scroll-reveal landing page built for murder mystery event supply retailers. It opens with a theatrical Before/After slider, then unfolds product categories act by act as the visitor scrolls. The palette of muted lavender, deep plum-noir, antique pearl, and tarnished gold creates an atmosphere that sells the experience before a single item lands in the cart.

Who this template is for

This template is designed for businesses and individuals who sell products or experiences tied to staged murder mystery events. It speaks directly to sellers who need a storefront that feels as curated as the events their customers are planning.

• Murder mystery supply shop owners selling prop kits, dossiers, and themed décor
• Event planners and coordinators offering packaged bachelorette or corporate mystery night solutions
• Drama teachers and educators building semester-end showcase experiences for students

What problem this template solves

Generic retail templates flatten the drama out of niche hobby supply stores. A plain product grid cannot communicate atmosphere, and atmosphere is exactly what murder mystery shoppers are buying. This template solves that gap.

• Visitors arrive without a clear vision of their event and leave having mentally staged the entire evening
• Product categories feel scattered on standard e-commerce pages; this template sequences them like acts in a play
• Standard landing pages use forms and friction; this one uses pure visual momentum to push visitors toward the catalog

What you get with this template

You get a fully structured, single-page scroll-reveal layout with every section pre-built and ready to populate with your products and copy. The template handles pacing, atmosphere, and conversion flow so you can focus on filling it with your inventory.

• A Before/After header slider that transforms a bare table into a fully staged murder mystery scene
• Four thematic scroll sections covering décor kits, mystery packages, prop collections, and costume accessories
• Two call to action paths: a primary "Stage Your Murder" button and a secondary "Browse by Theme" set of thumbnail cards

Feature list

This template includes purpose-built components that work together to create a cohesive, high-conversion landing page experience.

Before/After Header Slider

A single dining table scene splits the full viewport. The left side shows a flat, uninviting setup under fluorescent light. Dragging the gold-handled slider right reveals the transformed scene: candelabras, wax-sealed place cards, a magnifying glass, and fog at the baseboards. The headline "Every murder deserves better staging." fades in only after the slider crosses the midpoint.

Progressive Scroll Reveal

Each content section begins muted and desaturated. As the visitor scrolls, the section blooms into full lavender-and-gold richness, as if stage lights are rising act by act. This pacing builds tension through accumulation rather than speed.

Thematic Product Sections

Four distinct scroll sections present product categories in narrative order: themed tablescapes and décor kits, downloadable mystery packages fanning open like case files, prop collections sliding into frame one piece at a time, and costume accessories and character cards dealt across the screen like a playing hand.

Dual call to action Architecture

The primary call to action, "Stage Your Murder," appears first as a ghost-outlined tarnished gold button after the header transformation. It reappears as a solid button after the prop reveal section. It anchors the full-width closing scene where all products reassemble into the completed tablescape.

Browse by Theme Thumbnail Cards

A secondary navigation path presents themed collection cards for options such as Gatsby Noir, English Manor, and Cruise Ship Vanishing. Each card clicks through to a filtered product collection, giving browsers a direct route without requiring any form submission.

Full-Width Closing Scene

The final section reassembles all featured products into the completed "after" tablescape from the header. This visual callback closes the narrative loop and anchors the solid call to action, making the click feel like the natural final act.

Page sections overview

Design & branding system

The visual identity follows a Luxe Minimal direction built around a carefully restricted four-color palette. Every color serves a specific role, and nothing competes with the theatrical atmosphere the layout is designed to create.

• Muted French lavender (#B4A7D6) washes section backgrounds; deep plum-noir (#2E1437) anchors text and dark backgrounds; antique pearl (#F4F0EC) provides breathing space between sections
• Tarnished gold (#C9A96E) is reserved exclusively for interactive elements, calls to action, price tags, and the slider handle, ensuring every actionable element stands apart
• The Luxe Minimal theme keeps ornamentation intentional: the page whispers atmosphere rather than shouting features, matching the sensibility of buyers who care about staging quality

Mobile & speed optimization

The scroll-reveal and slider mechanics are structured to translate cleanly across screen sizes. The layout prioritizes visual storytelling without sacrificing usability on smaller devices.

• The Before/After slider is designed with touch interaction in mind, allowing mobile visitors to drag the gold handle across the scene just as desktop users do
• Each thematic section stacks gracefully on narrow screens, preserving the act-by-act reveal pacing on mobile without requiring horizontal scrolling
• The restricted four-color palette and intentionally minimal ornamentation keep the visual layer light, supporting a clean render on the full range of device sizes

How this template helps you convert

This template is engineered as a click-through landing page. Its entire structure moves visitors from curiosity to catalog entry without any form, gate, or friction point.

1. The Before/After slider creates immediate emotional contrast. Visitors see what a bad party looks like and what a well-staged mystery looks like, and they feel the difference before reading a single word of copy.
2. The progressive scroll reveal sequences products in narrative order, so by the time the visitor reaches the closing call to action, they have mentally assembled their own event using your products.
3. The dual call to action paths serve two visitor types at once: the decisive buyer who clicks "Stage Your Murder" and the browser who explores themed collections first, both arriving at the product catalog through their own natural route.

Other information about this template

This template is categorized under Retail and E-Commerce, specifically within the Hobby and Passion Supplies subcategory. It is a strong fit for niche retailers who need their storefront to communicate experience and atmosphere, not just product listings.

• The template is designed as a click-through landing page with no embedded forms, contact fields, or quiz flows, keeping the path to the catalog frictionless
• The intersection context for this template aligns with curated collection creative direction and a card grid modular approach for the themed thumbnail navigation section
• The Neo-Retro theme influence is visible in the combination of period-accurate staging references (1920s speakeasy, English Manor, Victorian aesthetic) with a clean, modern minimal layout structure
• Target buyers using this template include bachelorette party planners, corporate event coordinators managing large guest counts, and drama educators building end-of-term productions

Show more