At rest it's a perfectly ordinary button. On hover, the label splits along an invisible seam — top half slides up, bottom half slides down, like shutters opening — and a second message appears in the gap.
The split is real: each shutter carries one half of the same label, cut mid-letter, so the closed state reads as one seamless line and the opening feels physical. The hidden layer fades in with a soft scale, styled independently — pair a clean grotesk on the shutters with an italic serif underneath.
Features:
True split-label effect — letters cut in half along the seam
Two independent layers: label + reveal, each with its own font and colors
Four color controls: shutter fill, label, reveal fill, reveal text
Adjustable duration, radius, padding
Link control with new-tab toggle — renders as a real <a> when linked
Performance-safe: CSS-only animation, zero global listeners
One code file, works in any Framer project
At rest it's a perfectly ordinary button. On hover, the label splits along an invisible seam — top half slides up, bottom half slides down, like shutters opening — and a second message appears in the gap.
The split is real: each shutter carries one half of the same label, cut mid-letter, so the closed state reads as one seamless line and the opening feels physical. The hidden layer fades in with a soft scale, styled independently — pair a clean grotesk on the shutters with an italic serif underneath.
Features:
True split-label effect — letters cut in half along the seam
Two independent layers: label + reveal, each with its own font and colors
Four color controls: shutter fill, label, reveal fill, reveal text
Adjustable duration, radius, padding
Link control with new-tab toggle — renders as a real <a> when linked
Performance-safe: CSS-only animation, zero global listeners
One code file, works in any Framer project
