Sitewright / effects

Effects gallery

Pick how Sitewright feels.

Everything on the right is live. Choose a background, headline animation, button and card style, then copy the config underneath into site.json.

Presets

Live preview

Your work, beautifully in motion.

The headline, background, buttons and cards below all use the effects you picked.

Get startedSee how it works
1,284
orders
96
shipped today
7
need attention

Pick a bean

Hover or touch this card to see the card effect. Press the buttons above for the button effect.

Roast to order

Hover or touch this card to see the card effect. Press the buttons above for the button effect.

Track every parcel

Hover or touch this card to see the card effect. Press the buttons above for the button effect.

Figures

Line figures that answer the pointer

Move over the drawing. Pick one below, then give it a place on the right (or let the suggestions fill them all).

Eighty-one pillars on a plinth that rise around the pointer.

Your config

Paste this next to brand in site.json, then run the generator again. Nothing else changes.

{
  "effects": {
    "heroBackground": "aurora",
    "headline": "split-words",
    "buttons": "glow-border",
    "cards": "spotlight",
    "reveal": "rise"
  }
}