The Effects Lab

A living menu of the details that make a site feel expensive. Everything below is running live on this page — hover over (or tap) a card to bring it to life.

Hover to set it spinning

Orbiting Words

Pure CSS

Your logo with everything you do circling it in 3D — the words curve around the ring like they're printed on glass.

✦ The Lookbook Riviant
Your work, page one
…and page two
✦ Fin.
Click the book — right turns forward, left turns back

Page-Flip Lookbook

CSS + a little JS

A real book with turning pages — portfolios, menus, and galleries presented like a coffee-table book.

R Hover me
Hello. Two-sided cards for team bios, pricing, or menus.

3D Flip Card

Pure CSS

Cards with a real front and back — perfect for staff bios, pricing tiers, or before & after shots.

Move your cursor around

Cursor Spotlight

CSS + a little JS

A soft glow that follows the visitor's cursor — makes hero sections and feature panels feel alive.

SHIMMER

Shimmer Text

Pure CSS

A sheen of light sweeps across headlines on hover — subtle, premium, zero images.

Featured A border of light that circles the card.

Animated Gradient Border

Pure CSS

A traveling glow that orbits the edge of a card — a classy way to say "look at this one first."

Frosted glass Content stays readable over anything.

Frosted Glass

Pure CSS

The blurred-glass look from iOS — panels that float over photos or color while text stays crisp.

Design that loads in gracefully
Each element takes its turn
Guiding the eye down the page

Scroll Reveal

CSS + a little JS

Sections fade and rise into place as visitors scroll — the whole page feels choreographed.

01Swipe or scroll sideways →
02Each slide clicks into place
03No library. Just CSS.

Scroll-Snap Gallery

Pure CSS

Galleries that snap crisply from slide to slide, like a native app — great for portfolios and product shots.

We build fast websites.

Typewriter Text

Pure CSS

Headlines that type themselves out, cursor and all. Hover the card to watch it retype.

Morphing Blob

Pure CSS

An organic shape that slowly breathes and shifts — a modern backdrop for photos and headshots.

Button Micro-interactions

Pure CSS

Tiny touches on the things people click — a sweep of light, a gentle lift, a satisfying press.

RIVIANT

Glitch Text

Pure CSS

A flicker of digital interference on hover — edgy and modern, great for tech and gaming brands.

3D Tilt I lean toward your cursor

3D Tilt Card

CSS + a little JS

Cards that tilt to follow the cursor like they're floating — product shots and portfolio pieces love this.

Infinite Marquee

Pure CSS

An endless ribbon of services, client logos, or press mentions gliding across the page. Hover to start it.

projects shipped

Count-Up Numbers

Pure CSS

Stats that count up before your eyes — "500+ clients" lands harder when visitors watch it climb. This one runs on a loop.

Hover to assemble

Exploded Build

CSS + product photos

Real part photos that fly together into a finished build — made here for firearm retailers, but it works for any kit, bundle, or "what's included" section. Drop in cut-out product shots and the parts assemble on hover.

Sliding underline Rising highlight Follow me →

Link Hovers

Pure CSS

Three ways a plain text link can greet the cursor — small details that make navigation feel considered.

Ambient Backgrounds

Aurora Background

Pure CSS

Soft ribbons of color drifting behind your content — a living backdrop for hero sections. Hover to see it breathe.

Every effect here can be dropped into an existing site — most are pure CSS, meaning zero impact on load speed.

Want One of These on Your Site?

Any effect on this page can be added to your existing website — usually in a single visit.

Let's Talk