Skip to content

Mocha Bloom Coffee House

An animated coffee house site: splashing cups, floating beans, a silky drifting backdrop and a tabbed menu.

Mocha Bloom Coffee House — Home
Mocha Bloom Coffee House — Menu
Mocha Bloom Coffee House — About
Mocha Bloom Coffee House — Order ahead
Mocha Bloom Coffee House — Mobile

Scroll inside the preview to see the whole page.

About this template

A rich, chocolate-brown café website that moves. Cups float and splash in the hero, coffee beans drift with parallax as you scroll, the headline shimmers in caramel, a tilted ribbon scrolls specials, drinks pop out of their cards on hover and customer notes float around a splashing cup. Includes a tabbed menu (coffee, lattes, iced, frappés and pastries), best sellers, a bean-to-bloom story, animated counters, an Order Ahead pickup form, About and Contact pages. Every animation is a class you can turn on or off in Cornerstone.

Highlights

  • Animated hero: floating, splashing cups, drifting beans with scroll parallax and a shimmering caramel headline
  • Tabbed menu built with the native Cornerstone Tabs element — drinks pop out of their cards on hover
  • Scrolling specials ribbon, animated counters, scroll reveals and floating review notes
  • Order Ahead pickup form and contact details built with Cornerstone Forms
  • Original illustration set (cups, iced drinks, frappés, pastries, beans) included
  • Every animation is a reusable class, and all motion respects “reduce motion”

Pages included

  • Home
  • Menu
  • About
  • Contact & Order Ahead
  • Privacy Policy

What you need

  • Required
    Pro theme or CornerstoneThe template is a Cornerstone export (.tco) — built with native Cornerstone elements, fully responsive.
  • Required
    Cornerstone FormsAdds the Order Ahead and contact forms

How installation works

  1. Make sure the Pro theme or the Cornerstone plugin is active, and install and activate Cornerstone Forms first.
  2. In WordPress, open Cornerstone › Templates, click Import and upload the .tco file. Pages, headers, footers, layouts, images, colours and fonts are added to your site.
  3. Go to Settings › Reading, choose A static page and set Homepage to “Home”.
  4. Forms send to your site’s admin email (Settings › General). To use another address, edit the form’s Email action in Cornerstone.
  5. Replace the sample text, photos and contact details with your own in Cornerstone — and you’re live.

More templates

See all →
Apex Motors
Automotive

Apex Motors

A liquid-glass sports car site told as a story: cars drive in, cross the screen as you scroll and a speedometer sweeps into view.

$59 Details
Smash & Ember Burgers
Food & Drink

Smash & Ember Burgers

A mouth-watering animated burger joint: the burger builds itself layer by layer, pulls apart as you scroll and fries fly around the page.

$59 Details
Vector & Velvet Design Studio
Creative & Agency

Vector & Velvet Design Studio

A dark purple and hot pink graphic design studio site whose animations look like a design app at work: pen tool, selection handles, swatches and kerning.

$59 Details