Glow is a masonry-style landing page template built for a teen skincare subscription box. It combines a draggable before/after hero slider, staggered product tile grids with hover flip cards, full-width cinematic video interstitials, and a five-step personalized skin quiz. The result is a scroll experience that earns trust before it asks for a subscription.
by Rocket studio
Loading preview…
Quick summary
Glow is a single-page landing page template designed for a direct-to-consumer teen skincare subscription box. It opens with an editorial before/after slider, moves through three distinct masonry grid acts, and closes with a personalized skin quiz that delivers a matched product preview. The entire flow is built to convert curious teen visitors and reassured parents alike.
Who this template is for
This template is built for founders and marketers running a dermatologist-backed skincare subscription for teens. It speaks directly to two audiences at once: the teenager scrolling on a phone and the parent who approves the purchase.
Direct-to-consumer skincare brands targeting teens aged 13 to 18
Subscription box businesses that use a quiz funnel to personalize the first order
Beauty entrepreneurs who want editorial-quality design without starting from scratch
What problem this template solves
Teen skincare shoppers are overwhelmed by generic drugstore options and unrealistic skin imagery. Most subscription landing pages either feel too clinical or too trendy. This template bridges that gap.
It replaces guesswork with a guided quiz that makes the visitor feel diagnosed, not sold to
It replaces airbrushed lifestyle shots with real subscriber skin diary content organized week by week
It replaces passive product grids with interactive flip cards that explain the science behind each ingredient
What you get with this template
You get a fully structured, single-page landing page layout with every core section pre-built and ready to customize. The design is editorial and warm, and the interaction model is built around engagement first.
A draggable before/after hero slider with a headline fade-in and a floating quiz call to action
Three sequential masonry grid acts covering product tiles, cinematic video breaks, and subscriber proof
A five-step skin quiz modal that ends with a personalized box preview and a subscribe call to action
Theme
Marketplace Grid
Creative direction
Cinematic Sequence
Color system
Merlot & Smoke
Style
Masonry/Pinterest
Direction
Quiz/Assessment
Page Sections
Draggable Before/after Hero Slider
Staggered Masonry Grid with Flip Cards
Cinematic Full-width Video Interstitials
Subscriber Skin Diary Grid
Five-step Personalized Skin Quiz Modal
Persistent Floating Quiz Button
Related questions
Who is this landing page template designed for?
How does the five-step skin quiz work inside the template?
Can I replace the cinematic video interstitial with my own footage?
Is the before/after slider touch-friendly for mobile users?
Can I customize the quiz questions and matched product preview?
Feature list
This template covers design, interaction, and conversion in one cohesive layout. Each feature below is part of the built template structure.
Before/After Hero Slider
The header opens with an editorial close-up of real teen skin split down the center of the viewport. A merlot pill-shaped drag handle lets visitors pull left or right to compare an unfiltered morning-light image with the same face eight weeks later. The headline "Your skin isn't the problem. Your routine is." fades in below the slider.
Staggered Masonry Grid with Flip Cards
The first grid act loads product tiles in a staggered masonry sequence. Each card flips on hover to reveal what the highlighted ingredient actually does. This turns a product gallery into a quick science lesson without leaving the page.
Cinematic Full-Width Video Interstitials
Between grid acts, full-width video sections break the scroll with slow-motion texture footage including pours, foam close-ups, and dropper releases. Ambient audio accompanies the visuals, building sensory interest before the subscriber proof section begins.
Subscriber Skin Diary Grid
The third masonry act replaces product tiles with real subscriber progress photos organized from week one through week eight. The grid becomes evidence rather than advertising. Visitors see unfiltered results before they ever reach the quiz.
Five-Step Personalized Skin Quiz
The primary call to action opens a modal quiz with five single-question steps. Each step uses illustrated tap-targets rather than a scrolling form. The quiz covers skin type, top concern, current routine length, age range, and known allergies. It ends with a matched three-product box preview and a "Subscribe and Save 20%" call to action.
Floating Quiz Call to Action
A merlot button labeled "Find My Routine" appears first as a floating element after the hero and reappears pinned at the grid's midpoint. This keeps the primary conversion action visible throughout the scroll without interrupting the content flow.
Page sections overview
Section
Purpose
Before/After Hero
Stops scroll with real skin comparison and headline
Floating Quiz Button
Keeps the primary call to action visible early
Masonry Grid Act 1
Showcases products with hover-flip ingredient reveals
Cinematic Video Interstitial
Builds sensory desire between grid acts
Skin Diary Grid
Delivers week-by-week subscriber proof
Five-Step Quiz Modal
Personalizes the box and closes the subscription
Linear Footer
Single-row footer with brand links and essentials
Design & branding system
The visual identity uses the Merlot and Smoke color system. The palette feels editorial and warm at the same time, like a velvet pouch turned inside out. Dark, sophisticated tones frame the grid while soft, warm tones keep individual cards approachable.
Deep merlot (#6B2737) anchors buttons, the slider handle, and progress indicators inside the quiz
Charcoal smoke (#3B3B3B) grounds body text and card borders throughout the masonry grid
Blush fog (#F2E0E0) sets the dominant background wash; soft ivory (#FAF5F2) fills individual card faces
Typography pairs Fraunces serif for display headlines with DM Sans for body and interface text
Mobile & speed optimization
This template is built mobile-first because teens primarily scroll on phones. Desktop users get the full masonry polish, but every interaction is designed around touch behavior.
The before/after slider is draggable on touch screens with no secondary controls needed
Quiz steps are single-question tap-target screens, never scrolling forms, keeping them fast on small screens
Staggered masonry tile reveals use Intersection Observer and CSS transforms only, keeping animation smooth without heavy scripting
How this template helps you convert
The layout is structured as a short film with three acts, and each act builds a different kind of trust before the quiz call to action appears a second time.
The hero slider and staggered flip-card grid establish credibility through honest imagery and ingredient transparency, so the visitor arrives at the quiz already informed.
The skin diary grid shows real week-by-week subscriber results before any purchase decision is made, replacing skepticism with visible proof.
The five-step quiz delivers a personalized box preview rather than a generic sign-up form, making the subscription feel matched and earned rather than sold.
Other information about this template
This template uses the Marketplace Grid theme with a Masonry/Pinterest layout style and a Cinematic Sequence creative direction. It is built for English-language, United States market deployment in USD pricing. The design system and interaction model are pre-set in the template and can be customized to match your specific brand and product lineup.
Template style: Masonry/Pinterest with Marketplace Grid theme
