Refill is a full-width immersive landing page template built for zero-waste beauty marketplaces. It opens with a full-screen looping video, flows through a curated product grid, ingredient origin story, and starter kit section, and converts visitors through a personalized free sample kit builder. The palette, typography, and scroll animations create a warm, apothecary editorial feel.
by Rocket studio
Loading preview…
Quick summary
Refill is a sensory-first landing page template for zero-waste beauty brands. It pairs a full-screen video header with a marketplace product grid, a full-bleed ingredient origin story, and a three-step free sample kit builder. The Cloud Canvas color system and editorial typography make every scroll feel like stepping deeper into a quiet apothecary.
Who this template is for
This template suits founders and creative teams building a direct-to-consumer zero-waste beauty brand or marketplace. It works especially well when the product story depends on texture, scent, and ingredient sourcing rather than bold promotional messaging.
Zero-waste beauty brands launching a new DTC storefront or curated marketplace
Organic and natural beauty founders who want sensory storytelling to do the selling
Gift-focused beauty retailers looking for a warm, editorial presentation that earns trust before asking for a purchase
What problem this template solves
Most eco-conscious shoppers are genuinely curious about switching from plastic pump bottles to zero-waste alternatives. The barrier is not interest but risk. They need to feel the product before they commit to an entirely new routine.
Removes the risk barrier with a free personalized sample kit flow, so visitors can try before they buy
Replaces flat product listings with a sensory scroll experience that builds confidence in unfamiliar formats like solid shampoo bars and clay masks
Gives emerging brands a credible, editorial visual presence without requiring a custom design build from scratch
What you get with this template
The template delivers a complete, section-led landing page ready to adapt for a zero-waste beauty marketplace. Every section has a defined purpose, from first impression to final conversion.
A full-screen looping video hero with a translucent headline overlay and dual call-to-action buttons
A curated product marketplace grid, a full-bleed ingredient origin section, a starter kit grid, a testimonials section, and a structured footer
Theme
Marketplace Grid
Creative direction
Immersive Visual
Color system
Cloud Canvas
Style
Full-Width Immersive
Direction
Freemium/Trial
Page Sections
Full-screen Looping Video Hero
Curated Marketplace Product Grid
Full-bleed Ingredient Origin Story
Three-step Free Kit Builder
Sticky Conversion Bar
GSAP Scroll Animations and Parallax
Related questions
Can I use this template without video production experience?
Does the kit builder modal require custom development to set up?
Is this template only suitable for zero-waste beauty brands?
Can the product grid and starter kit sections be customized?
What scroll animation library does this template use?
A three-step kit builder modal, a sticky call-to-action bar that appears at fifty percent scroll depth, and GSAP-powered scroll reveal animations throughout
Feature list
This template ships with a focused set of interactive and visual features. Each one is designed to support the sensory storytelling approach and the free-trial conversion model described in the brief.
Full-Screen Looping Video Hero
The header plays a looping video in soft, diffused morning light. Close-up shots of hands working with clay masks, solid conditioner bars, and bamboo lipstick tubes set the texture-forward tone immediately. A single translucent headline drifts over the footage on load.
Marketplace Product Grid
Square product cards sit on a raw linen background. Ingredient lists are styled as short, poetic lines beneath each card. Sage-colored hover states mark interactive moments without breaking the calm visual rhythm.
Full-Bleed Ingredient Origin Section
A macro-photography collage fills the full viewport width. Shea butter, lavender fields, and volcanic clay imagery create an immersive pause between the product grid and the starter kit section. A scrolling marquee runs across the section to reinforce sourcing credibility.
Three-Step Kit Builder Modal
Clicking the primary call to action opens a focused modal flow. Visitors choose their hair type, then a skin concern, then a scent family. The result is a personalized sample kit shipped for the cost of postage only.
Sticky Call-to-Action Bar
A "Build Your Free Sample Kit" bar appears fixed to the bottom of the viewport once the visitor reaches fifty percent scroll depth. It stays visible without interrupting the reading flow and provides a persistent conversion path.
GSAP Scroll Reveal Animations
Sections animate into view using GSAP-powered reveals and parallax effects. The rhythm alternates between open browsing grids and full-bleed immersive panels, creating a paced, editorial scroll experience.
Page sections overview
Section
Purpose
Video Hero
Sets the sensory tone and presents the dual calls to action
Builds sourcing trust through macro photography and a marquee
Starter Kits Grid
Presents curated bundles in an asymmetric bento layout
Testimonials
Reinforces trust with product-specific quotes and overlapping portraits
Footer
Provides navigation links and brand tagline in a split layout
Design & branding system
The template uses a Cloud Canvas color palette that feels like kraft paper and undyed cotton. Backgrounds stay warm and quiet so the products themselves provide the only strong color on screen.
Colors: soft linen white (#F5F0EB), warm oat (#D9CBBA), muted sage (#A3B18A) for interactive states and tags, and charcoal (#3D3D3D) for all body text
Typography: Fraunces serif for display headings to add warmth and editorial weight, DM Sans for body copy to keep reading effortless
Visual style: apothecary editorial with warm minimalism, sensory-first composition, no busy backgrounds and no loud promotional elements
Mobile & speed optimization
The template is built with a mobile-first priority, reflecting how eco-conscious shoppers typically browse. Tactile scroll behavior on phone feels natural alongside the sensory content direction.
Lazy image loading keeps the product grid and macro photography from slowing the initial page load
A video poster fallback image displays while the hero video loads, so the above-the-fold experience stays intact on slower connections
All interactive elements, including the kit builder modal and sticky bar, are sized and spaced for comfortable thumb use on small screens
How this template helps you convert
The conversion model is built around reducing risk, not applying pressure. The free sample kit offer lets visitors experience zero-waste beauty formats before committing to a full purchase.
The primary call to action, "Build Your Free Sample Kit," appears below the starter kit grid and again in the sticky bar after fifty percent scroll depth, giving visitors two clear moments to act without feeling pushed
The kit builder modal guides visitors through three simple choices, hair type, skin concern, and scent family, so the result feels personal rather than generic
The secondary call to action, "Browse the Full Apothecary," gives committed shoppers a direct path to the full product marketplace grid, keeping both audience segments moving forward
Other information about this template
This template is part of a broader Marketplace Grid theme family, designed for brands that need both editorial storytelling and functional product browsing in a single page layout.
The Freemium and Trial landing page direction makes this template well suited to any beauty brand using a sample-first or try-before-you-buy acquisition model
The Immersive Visual creative direction and Full-Screen Video Background header concept make it distinct from standard e-commerce grid templates
The footer uses a split Arc Browser-style layout with the brand logo and tagline on the left and navigation links on the right
Localization in the source brief is set to English, United States dollars, and the United States market
Social proof elements include product-specific testimonial quotes, ingredient sourcing credibility signals, and starter kit count metrics
