Opens in a new tab
Log inStart free

Rotating heading

A rotating heading for Bricks Builder: beside the title text, a column of words rises line by line and pauses on the center one, which lights up while the words above and below stay dim. A common pause button keeps it accessible, and it holds still with reduced motion.

Dark mode readyNeeds Code execution

Copying for Fancy Framework · Desktop first

Needs a framework. Get Fancy Framework (free)

In the annual plan, $99/year. See plans

Uses a small script. Turn on Code execution in Bricks › Settings › Custom code. How to turn on Code execution

Preview

Template details

What’s inside

The components it’s built from. They come with the template when you paste it, and you edit them from the Bricks panel.

  • FBK Button

    A link styled as a button, with style, size and width.

  • FBK Intro

    Eyebrow, title, lead and an actions slot for buttons.

Adjust it

Change these variables in Bricks to tune it; everything else follows your framework.

On the element Rotating heading, class fbk-rotatehead

Time each word stays in the middle, and the length of each move up

--fbk-t-step
2.2s
--fbk-t-move
0.7s
--fbk-t-color
inherit
--fbk-t-dim
0.3
--fbk-t-dim-next
0.14

Extra space between the title and the lead, so the next word stays hidden behind it

--fbk-t-lead-space
var(--space-m)

Space between the rows of words (their line height): tighter than the title's, so they read as one column

--fbk-t-line
1.05

Replaces

In Fancy Bricks 1.0 and 2.0 this was Heading multiline (2.0).

More like this

See all All templates