South Indian Filter Coffee Roastery Origin Story Website Template
Decoction is a full-width immersive landing page template built for a South Indian filter coffee roastery. It follows an Origin Story creative direction, guiding visitors through estate, roast, and ritual chapters before reaching a direct-sales product selector. The Parchment & Rust color system, parallax scroll, and nine-tile photo mosaic header create a sensory-rich experience that earns the purchase before the call to action appears.
by Rocket studio
Quick summary
Decoction is a full-width immersive landing page template for a South Indian filter coffee roastery. It tells the story of estate-grown beans from Chikmagalur and Coorg, through wood-fired roasting, to the brass filter and the final pour. The scroll builds emotional weight before delivering a direct-sales product selector and a monthly subscription path.
Who this template is for
This template is built for small-batch coffee roasters who sell direct to consumer. It suits businesses with a strong origin story and a specific brewing ritual at the heart of their brand identity.
- Direct-to-consumer specialty coffee roasters seeking premium positioning
- South Indian kaapi brands targeting diaspora buyers and specialty coffee drinkers
- Independent roasters who want immersive storytelling to justify premium pricing
What problem this template solves
Most coffee landing pages lead with the product and trust the buyer to imagine the rest. That approach fails when the product's value lives in its provenance, its process, and its cultural weight. Decoction solves this by making the visitor experience the journey before they see the price.
- Buyers land without context and leave before they feel the brand's difference
- Generic product pages cannot communicate terroir, roast craft, or ritual meaning
- Emotional connection is absent, so the purchase feels like a transaction rather than a return
What you get with this template
You get a complete, single-page layout that takes visitors from the first photograph to the final add-to-cart action. Every section is a built chapter, not a filler block.
- A nine-tile photo mosaic hero with a letterpressed headline and reveal animation
- Five narrative scroll chapters covering estate, harvest, roast, ritual, and product selection
- A product selector with grind type, roast profile, and weight options, plus a sticky call-to-action button
Feature list
This template ships with purpose-built components tied directly to the roastery brief. Each feature serves the Origin Story direction and the Direct Sales outcome.
Nine-Tile Photo Mosaic Header
Nine unevenly cropped photographs tile edge to edge across the full viewport. The grid reads as one living texture rather than a gallery. The headline "From Estate Soil to Steel Tumbler" sits letterpressed across the mosaic in parchment cream, with a staggered reveal animation on load.
Parallax Origin Story Scroll
Each scroll chapter is a full-width section with parallax landscape imagery that gives way to tight macro shots. Altitude numbers, roast temperatures, and drip times appear as credibility anchors within the copy. The pacing slows deliberately as the visitor moves from estate to filter.
Product Selector Modal
The product selector opens at the end of the origin scroll. It lets buyers choose grind type (filter, espresso, or whole bean), roast profile (Planter's Classic, Estate Bold, or Monsoon Reserve), and weight (200g, 500g, or 1kg). A brass-accented "Subscribe Monthly" option carries a 10% badge to encourage repeat purchases.
Sticky Call-to-Action Button
"Start Your Filter" appears as the primary call to action at the close of the origin scroll. It then repeats as a sticky button after the mid-page mark. The button uses the tarnished brass accent color so it catches the eye without breaking the editorial tone.
Spotlight Hover Cards
Individual story cards within the scroll chapters use spotlight hover behavior. The interaction draws focus to key details such as estate names, bean varieties, and roast data. It keeps the page feeling alive without interrupting the narrative rhythm.
Minimal Linear Footer
The footer follows a single-row linear layout. It stays clean and uncluttered so the page ends on the brand's terms, not on a wall of links.
Page sections overview
| Section | Purpose |
|---|---|
| Hero Mosaic Grid | Opens with nine-tile photo grid and letterpressed headline |
| Estate Origin Chapter | Tells the terroir story with elevation stats and parallax landscape |
| Harvest & Sorting Chapter | Covers hand-sorting and the human care behind each batch |
| Wood-Fired Roast Chapter | Shows drum roaster detail with temperature and duration data |
| Brass Filter Ritual Chapter | Guides the visitor through the drip and davara pour sequence |
| Product Selector Section | Delivers grind, roast, and weight choices with subscription path |
| Linear Single-Row Footer | Closes the page with a minimal, brand-focused footer |
Design & branding system
The visual identity follows an Agrarian Root theme. Every color and type choice recalls an aged plantation ledger left open on a wooden desk.
- Color palette: parchment cream (#F5ECD7) dominates backgrounds; laterite rust (#A0522D) carries headlines and dividers; coffee cherry burgundy (#5C1A1A) anchors the footer and deep-scroll sections; tarnished brass (#C9A84C) marks buttons and accent details
- Typography: Fraunces serif display for headlines and chapter titles, DM Sans for body copy, creating a contrast between editorial weight and everyday readability
- Texture and style: weathered surfaces, letterpress type treatment, and aged paper aesthetics give the page the feel of a hundred-year-old coffee estate document
Mobile & speed optimization
The template is desktop-first by design, built for the emotional immersion that a large screen provides. Full mobile responsiveness is included so the experience holds on smaller devices.
- Parallax scroll and mosaic reveal use native CSS scroll behavior and Intersection Observer for smooth, dependency-light animations
- Staggered text and scroll-linked depth effects are optimized to run without heavy JavaScript frameworks
- The sticky call-to-action button repositions cleanly on mobile so the purchase path remains visible throughout the scroll
How this template helps you convert
Every layout decision in this template serves a single goal: making the visitor feel the distance between ordinary coffee and what this roastery offers. By the time they reach the product selector, adding to cart feels like bringing something home rather than completing a transaction.
- The origin scroll builds perceived value chapter by chapter, so price resistance drops before the product is shown
- The sticky "Start Your Filter" button keeps the call to action within reach without interrupting the storytelling
- The "Subscribe Monthly" path with a brass 10% badge turns a one-time buyer into a recurring customer at the moment of highest intent
Other information about this template
This template is designed for the Decoction roastery concept but is fully adaptable to any craft food or beverage brand that leads with provenance and process. The Agrarian Root theme and Parchment & Rust color system can be recolored to match other estate or artisan identities.
- The template supports dual pricing display, making it practical for brands selling in both INR and USD markets
- Cultural terminology such as kaapi, davara, tumbler, and decoction is embedded in the copy structure and can be retained or replaced depending on the brand
- The Origin Story creative direction works well beyond coffee; tea estates, single-origin chocolate, and small-batch spice brands can use the same scroll chapter structure




Theme
Agrarian Root
Creative direction
Origin Story
Color system
Parchment & Rust
Style
Full-Width Immersive
Direction
Direct Sales
Page Sections
Nine-tile Photo Mosaic Hero
Parallax Origin Story Chapters
Product Selector Modal
Sticky Call-to-action Button
Spotlight Hover Cards
Minimal Linear Footer
Related questions
What kind of business is this template built for?
Can I change the roast profiles and grind options in the product selector?
Does this landing page template work on mobile devices?
How many sections does this landing page include?
Can I adapt this template for a coffee brand that is not South Indian?