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.

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

SectionPurpose
Hero Mosaic GridOpens with nine-tile photo grid and letterpressed headline
Estate Origin ChapterTells the terroir story with elevation stats and parallax landscape
Harvest & Sorting ChapterCovers hand-sorting and the human care behind each batch
Wood-Fired Roast ChapterShows drum roaster detail with temperature and duration data
Brass Filter Ritual ChapterGuides the visitor through the drip and davara pour sequence
Product Selector SectionDelivers grind, roast, and weight choices with subscription path
Linear Single-Row FooterCloses 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.

  1. The origin scroll builds perceived value chapter by chapter, so price resistance drops before the product is shown
  2. The sticky "Start Your Filter" button keeps the call to action within reach without interrupting the storytelling
  3. 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
South Indian Filter Coffee Roastery Origin Story Website Template
South Indian Filter Coffee Roastery Origin Story Website Template
South Indian Filter Coffee Roastery Origin Story Website Template
South Indian Filter Coffee Roastery Origin Story Website Template

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?