There is a common misconception: that “premium” animations require a heavy JavaScript library, and that this always comes at the cost of speed. That is simply not true.

Every effect on this page runs right now, live, with no plugin - just CSS and a little vanilla JavaScript. And this page itself, with all its animations, stays fast. That is the whole point: a beautiful effect and speed are not a contradiction when you build them right.

Below is a menu of text and heading effects. Each one has a name. Play with them (there is a “Replay” button), and if something fits your site - one click and we know exactly what you want.

All effects respect the prefers-reduced-motion setting - for anyone who asked for less motion, they show without animation.

Text & heading effects

Igniteignite

OnceMain headlines and value statements

SpeedFastSlow

Fast sites that turn visitors into customers 

Want this? →
Show code
/* CSS: veil over each word fades out in a wave */
.word::after { content:''; position:absolute; inset:0;
  background: var(--bg); transition: opacity .45s;
  transition-delay: calc(var(--i) * var(--stagger, 45ms)); }
.go .word::after { opacity: 0; }

Letter Revealletter-reveal

OnceShort headlines and intros

SpeedFastSlow

Every letter in place, every detail matters

Want this? →
Show code
.go .ltr { opacity:1; transform:none; }
.ltr { opacity:0; transform:translateY(0.5em);
  transition: .5s; transition-delay: calc(var(--i)*35ms); }

Typewritertypewriter

OnceA tagline or opening line

SpeedFastSlow

We build a site that speaks for your business

Want this? →
Show code
let n=0; timer=setInterval(()=>{
  el.textContent = full.slice(0, ++n);
  if (n>=full.length) clearInterval(timer);
}, 55); // + a CSS blinking caret

Gradient Textgradient-text

LoopColorful brands and accent headings

SpeedFastSlow

Premium. Fast. Precise.

Want this? →
Show code
background: linear-gradient(90deg,#3BD9FF,#8B5CF6,#3BD9FF);
-webkit-background-clip: text; color: transparent;
background-size: 200%; animation: slide 5s linear infinite;

Shine Sweepshine-sweep

LoopA premium, luxury brand feel

SpeedFastSlow

Luxury you feel from the first moment

Want this? →
Show code
background: linear-gradient(100deg,#fff 40%,#3BD9FF 50%,#fff 60%);
-webkit-background-clip:text; color:transparent;
background-size:250%; animation: shine 3s linear infinite;

Marker Highlightmarker-highlight

OnceHighlighting one key word

SpeedFastSlow

Speed is your advantage

Want this? →
Show code
.mark { background: linear-gradient(var(--accent),var(--accent))
  no-repeat; background-size: 0% 38%; background-position: 0 88%;
  transition: background-size .7s; } .go .mark { background-size:100% 38%; }

Underline Drawunderline-draw

OnceEmphasizing a heading or takeaway

SpeedFastSlow

The bottom line: real results

Want this? →
Show code
.u::after { content:''; position:absolute;
  inset-block-end:-.1em; inset-inline:0; height:3px; background:var(--accent);
  transform:scaleX(0); transform-origin:right; transition:transform .6s; }
.go .u::after { transform:scaleX(1); }

Scramblescramble

OnceTech headlines, a surprise effect

SpeedFastSlow

Decoding Google's algorithm

Want this? →
Show code
const glyphs='אבגדהוזחט...';
timer=setInterval(()=>{ out=[...full].map((c,i)=>
  i<revealed ? c : glyphs[Math.random()*glyphs.length|0]).join('');
  el.textContent=out; revealed+=0.5; }, 55);

3D Tilttilt-3d

InteractiveInteractive cards and headings

↖ Hover to tilt
IntensitySubtleStrong

Depth you can feel

Want this? →
Show code
el.onpointermove = e => {
  const r=el.getBoundingClientRect();
  const x=(e.clientX-r.left)/r.width-.5, y=(e.clientY-r.top)/r.height-.5;
  el.style.transform=`perspective(600px)
    rotateY(${x*max}deg) rotateX(${-y*max}deg)`; };

This is just the start

This is the first category in the menu - text and headings. Next we will add effects for images, buttons, whole sections and backgrounds. All on the same principle: beautiful, live, and fast.

Want a few of these effects on your site? They are part of the build with us - let’s talk and we’ll put together exactly what fits.