Welcome to the Style Lab.
Everything that moves on this site, in one place - and the one line it takes to make each of it.
Text with a highlight running through it
Move your pointer across the coloured words above. A highlight follows it through the gradient.
## Text with a [text gradient="sunset" shine="hover"]highlight running through it[/text]
Gradients: brand · sunset · ocean · forest · fire · candy - or two colours of your own, gradient="#f26b3a,#8b5cf6". Use shine="sweep" to let the highlight run across by itself.
Headlines that rise word by word
## [text words]Headlines that rise word by word[/text]
Swooshing cards
Scroll away and back - the cards sweep in from the sides each time. Hover one and it leans toward your pointer.
The first card sweeps in from the left, out of a soft blur.
The middle ones rise with a little scale.
The last one sweeps in from the right.
[row gap="4" reveal reveal-animation="swoosh-sides" reveal-replay tilt]
[col][card title="…"]…[/card][/col]
…
[/row]
reveal-animation="swoosh" brings every card up out of a blur, one after another.
reveal-replay plays it again each time the row comes back into view.
tilt makes each card lift and lean toward the pointer, with a soft light where it points.
Words that light up as you read
Keep scrolling and watch this paragraph. It starts dim and lights up a word at a time as it moves up the screen, so the reader's eye is carried along the line. It is one attribute on the text tag, and it switches itself off for anyone who asks their device for less motion.
[text light-up size="xl"]Your paragraph…[/text]
The menu bar and the footer
The bar at the top is a Segmented bar: the links sit in a tray, and a raised thumb slides to whichever one you point at, then comes back to rest on this page. The site's name sits in a pill of its own, and there is no strip behind them - the pills float over the page on frosted glass, and the page scrolls behind them.
Explore and Hobbies open as cards - coloured icon tiles, a line of description, a heading with a link, a strip of chips and a side box. Move along the bar and one card slides into the next.
Other bar shapes are Pill, Underline glide, Dock and Neon, and the bar can shrink when the page scrolls. It is all set in Content > Menus, on the Behaviour tab and in each item's editor.
The footer below is the Showcase footer: a big call to action with gradient words, a row of facts with a status dot, a tagline, and the site's name drawn huge behind it. It is set in Site Settings > Footer.