Distill is a hero-dominant landing page template built for contract extraction and processing labs. It tells a botanical origin story through scroll-linked parallax, a hand-illustrated infographic header, and a stepped B2B inquiry form. The design blends nature-inspired earth tones with clinical precision to earn credibility before asking for the conversion.
by Rocket studio
Loading preview…
Quick summary
Distill is a single-page template designed for pharmaceutical-grade botanical extraction labs. It guides B2B visitors through a full origin story, from partner farm to finished fraction, using parallax animation, macro lab imagery, and a stepped inquiry form. The result is a landing page that earns trust before it asks for the click.
Who this template is for
This template is built for extraction and processing labs that sell to professional buyers, not end consumers. It works best when your clients need documented proof of provenance, method, and purity before they commit to a partnership.
Cosmetic formulators and supplement brand research and development leads sourcing high-potency botanical actives with a certificate of analysis
Fragrance houses that require terpene isolation backed by gas chromatography and mass spectrometry (GC-MS) spectral verification
Contract extraction operations positioning themselves as a precision science partner rather than a commodity supplier
What problem this template solves
Botanical extraction labs often lose B2B prospects because their web presence looks generic. A buyer who needs pharmaceutical-grade output with full traceability needs more than a product list. They need to see the hands on the plant and the instrument on the molecule before they trust you with their formulation brief.
Credibility gap: no visual proof of method, terroir, or documentation standards
Conversion friction: complex B2B inquiry forms that feel abrupt before trust is established
Positioning blur: no clear narrative separating precision extraction from low-grade commodity processing
What you get with this template
You get a fully structured, hero-dominant landing page with a clear narrative arc and two conversion paths. Every section is purpose-built for a B2B scientific audience that evaluates partners carefully.
A 90/10 hero section featuring a hand-illustrated botanical cross-section infographic with parallax depth, flowing extraction pathways, yield percentages, purity grades, and method icons
Theme
Nature-Inspired
Creative direction
Origin Story
Color system
Botanical
Style
Hero-Dominant (90/10)
Direction
Partnership/B2B
Page Sections
Parallax Botanical Hero Illustration
Scroll-linked Origin Story
Three-method Science Block
Output Format Bento Grid
Stepped B2B Inquiry Form
Certification and Trust Signal Section
Related questions
Who is this landing page template designed for?
What conversion paths does the template include?
Can I customize the illustrated hero infographic?
Does the template cover more than one extraction method?
Is this template suitable for a cannabis or hemp extraction lab?
Five content sections covering the origin story, extraction science, output format catalog, certifications, and a stepped partnership inquiry form
A secondary conversion path that gates a capability deck download behind a business email field
Feature list
The template includes a focused set of purpose-built components that support the extraction lab's sales narrative from first impression to final form submission.
Hand-Illustrated Parallax Hero
The hero fills ninety percent of the viewport with a botanical cross-section illustration. Plant anatomy on the left connects through animated extraction pathways to labeled output vials on the right. Yield percentages, purity grades, and method icons are embedded directly in the illustration. Plant fibers sway, liquid moves through condensers, and data labels pulse with subtle scroll-linked animation.
Scroll-Linked Origin Story Flow
Scrolling follows a single plant from soil to finished fraction. The sequence moves through terroir photography of partner farms with altitude markers and harvest windows, then zooms into macro photography of trichomes and cell walls. Lab footage sections follow, showing rotary evaporators, chromatography column separations, and technicians reading spectral outputs.
Three-Method Science Section
A dedicated science section presents the three core extraction methods: cold press, steam distillation, and supercritical carbon dioxide (CO₂) extraction. Each method is paired with animated process imagery and macro lab visuals that deepen the science without losing the botanical narrative.
Output Format Bento Grid
A bento-style grid displays the four output categories: essential oils, isolates, oleoresins, and tinctures. Each tile carries specification details relevant to professional buyers evaluating sourcing options.
Stepped B2B Inquiry Form
The primary call to action is "Request a Custom Extraction Brief." The form collects company name, target botanical or compound, desired output format, and annual volume range via a stepped slider. The form appears only after the origin story has established credibility.
Trust Signal and Certification Block
A dedicated certifications section displays batch certificates, GC-MS report previews, and partner farm testimonials. These trust signals appear directly before the primary conversion form to reinforce confidence at the moment of decision.
Page sections overview
Section
Purpose
Hero Infographic
Establishes botanical-to-fraction narrative with illustrated parallax header
Origin and Terroir
Presents partner farm photography, altitude markers, and harvest windows
The Science
Showcases three extraction methods with animated lab imagery
Output Format Grid
Catalogs essential oils, isolates, oleoresins, and tinctures with specs
Certifications and Form
Displays trust signals and hosts the stepped B2B inquiry form
Footer
Linear single-row footer with secondary navigation and contact details
Design & branding system
The visual identity pairs nature-inspired organic texture with laboratory clinical precision. The result feels like a field notebook lying open on a stainless-steel bench, dried botanicals pressed alongside analytical data.
Four-color botanical palette: deep chlorophyll green (#2D5F2D) anchors section backgrounds, pressed-petal ivory (#F5F0E8) carries body text and whitespace, resinous amber (#C48B2C) marks calls to action and data callouts, and extraction-flask teal (#3A7D7B) traces hover states and progress indicators
Typography pairing of Fraunces display serif for headlines and DM Sans for body copy, reinforcing the nature-meets-clinical tone
SVG path animations, scroll-linked zoom, and Intersection Observer-driven scroll reveals deliver high animation fidelity with no heavy third-party libraries
Mobile & speed optimization
The template is designed desktop-first to match the working environment of B2B formulators. Mobile responsiveness is built in so the page remains fully functional on smaller screens.
Native CSS scroll and Intersection Observer handle all animation and reveal behavior, keeping the page light without external animation dependencies
Desktop-first layout priority ensures that complex bento grids, parallax illustrations, and multi-column lab sections render with full visual impact on professional workstations
Responsive breakpoints carry the stepped form, output grid, and hero illustration to mobile viewports without breaking the narrative flow
How this template helps you convert
The template is built around a deliberate trust sequence. The conversion ask comes only after the visitor has moved through the full botanical origin story and seen proof of method and documentation.
The hero illustration and origin story sections establish provenance and scientific credibility before any product or service claim is made, so the visitor arrives at the form already convinced of the lab's expertise.
The stepped inquiry form reduces friction by breaking the B2B brief request into logical stages, company identity first, then target compound, desired output format, and volume range, making it easy to complete incrementally.
The secondary capability deck download path captures lower-intent visitors who are not yet ready to submit a full brief, giving the lab a second conversion opportunity with minimal added friction.
Other information about this template
This template is part of a broader set of nature-inspired, B2B-focused designs suited to specialty ingredient and extraction businesses. A few additional details worth noting before you build with it.
The footer follows a linear single-row pattern, keeping the page close without adding heavy navigation weight at the bottom
The "From Field to Fraction" hero tagline is pre-placed at the bottom edge of the hero illustration block and is ready to customize for your lab's specific positioning
English-language copy with United States dollar pricing context and metric and imperial specification support are baked into the layout logic for the output format grid
The template supports both the primary "Request a Custom Extraction Brief" path and the secondary "Download Our Capability Deck" gated download in the same page flow without visual conflict
