Motion, effects & voice — Techno docs

Techno's effects are optional and subtle. Each one respects the visitor's operating system setting for reduced motion: when that setting is on, animations stop and the page shows its final state immediately.

Effects

Theme settings › Motion and effects:

Setting	Default	What it does
"Show scanline overlay"	Off	Adds faint horizontal scanlines over the whole page, with a slow flicker and a soft band that sweeps down the screen.
"Show grid overlay"	Off	Draws a faint 28 px grid on the page background, behind all content.
"Show boot sequence on load"	On	Fades the header status strip and hero content in, one after another, as the page loads. On the password page it also prints a short start-up log.

Every effect is drawn in colors mixed from the active color palette, so it stays faint on light and dark palettes alike. The overlays never block clicks or taps.

Tip

The grid overlay was designed for the Blueprint palette, but it works with every palette.

Blinking cursor

The Hero section has its own "Show cursor" setting. It adds a blinking block after the heading, like a terminal prompt. See Hero.

Reduced motion

If a visitor has asked their device to reduce motion, for example with Reduce motion on macOS and iOS, Techno stops the flicker, the sweep, the boot fade and the cursor blink for them, the header set to "Sticky header" › On scroll up hides and shows without sliding, the back-to-top button jumps straight to the top, with no scroll or fade, the Announcement bar's countdown shows days, hours and minutes only, updated once a minute, and a Slideshow never rotates on its own (it shows a play button instead) and jumps between slides without scrolling. You don't need to do anything.

Voice

Techno's default copy is written like a terminal: the cart is a "Cart buffer", checkout is "Execute checkout", the search field is prompted with "grep >".

System chatter

Theme settings › Copy › "Show system chatter in copy". On by default. It adds playful system lines to a handful of strings:

Where	Line added
Collection pages, after the "Showing 12 of 48" count	"Index rebuilt in 3ms, which nobody asked about"
Product page, after the free dispatch and returns note	"We do not email you about our journey."

Turn it off for a plainer tone. Nothing else changes.

Changing the theme's wording

Every storefront word in Techno can be edited without code:

In Shopify admin, go to Online Store › Themes.
Click ⋯ › Edit default theme content on Techno.
Search for the text you want to change, for example "Execute checkout", and type your own.

Recipes

Full terminal

Theme settings › Motion and effects › "Show scanline overlay": on
Theme settings › Motion and effects › "Show boot sequence on load": on
Hero › "Show cursor": on

Calm and plain

Theme settings › Motion and effects: every setting off
Theme settings › Copy › "Show system chatter in copy": off
Edit default theme content: "Cart buffer" → "Cart", "Execute checkout" → "Check out"