42 effects. Scroll down. Every one is a single HTML attribute or class.
data-reveal="up | down | left | right | zoom | blur | fade | clip"
data-stagger="90"
class="fx-bounce-in" style="--d:.2s"
data-preloader="1500" + data-preloader-count
Runs once when a page opens (see the Folio template). Here's a mini version:
data-split
Words that rise one by one from a hidden mask.
data-split="chars"
EVERY LETTER COUNTS
data-scramble · data-scramble="hover"
SYSTEM ONLINE
data-typed="one|two|three"
We build sites that
data-rotate="one|two|three"
Websites that
data-scrub
Keep scrolling and watch each word light up as you read it, one by one, at exactly your pace. It turns a paragraph into a moment.
class="fx-gradient-text"
Colour that flows
class="fx-glitch" data-text="…"
HOVER TO GLITCH
data-count="2400" data-suffix="+"
data-parallax="0.2"
data-expand="12"
data-zoom="1.3"
data-stack="90"
data-hscroll
data-skew
Scroll fast up and down past this.
<svg data-draw>
data-scroll-progress
See the gold bar at the very top of this page.
data-header → .is-scrolled
This page's top bar gained a background once you scrolled.
data-magnetic="0.4"
Hover me
data-tilt="12"
data-spotlight
data-trail="80" + .trail-item
<body data-cursor> + data-cursor-text="View"
data-particles="#8b7bff"
data-ripple
data-confetti
data-compare="50"
data-tabs / data-tab / data-panel
data-carousel="3500"
"The best agency we've worked with."
"Our conversions doubled in a month."
"Beautiful, fast, and on budget."
data-countdown="2027-01-01T00:00"
data-theme-toggle
data-marquee="25" (+ data-marquee-reverse)
class="fx-float"
class="fx-blob"
class="fx-spin"
class="fx-shine"
Hover for shine
class="fx-pulse"
Live now
class="fx-underline"