Motion
Purposeful animation — every motion has a reason. Raga uses three core variants from lib/motion.ts.
Scroll Animations
Elements that animate in as they enter the viewport, driven by IntersectionObserver — no library required.
Text Animations
Character-level scramble effects that resolve into legible text — used on section labels and location tags.
Text Scramble
Characters randomize through a charset then resolve left-to-right. Triggers once on scroll into view.
SELECTED WORK
TAMPA, FLORIDA
TRIGGER
Scroll into view (IntersectionObserver 0.3)
CHARS
A–Z 0–9 ! @ # $ % & *
INTERVAL
30ms per frame
RESOLVE
Left to right, proportional to length
PLAYS
Once — guard via hasPlayed ref
Entrance Animations
Three Framer Motion variants defined in lib/motion.ts — import and apply with motion.div.
Blur Entrance
Primary reveal — used on page heroes, large headings, and first-load content.
Rhythm Kumar
Blur Reveal
Scroll-triggered reveals — used on cards, body sections, and supporting content.
Scroll-triggered content reveals with a soft blur fade-up — used on cards, sections, and body copy.
Stagger Container
Parent wrapper that orchestrates children entering with a 100ms offset — used for lists and card grids.
Cursor Effects
Two layered cursor systems — a sharp dot for precision, and an ambient orb for atmosphere.
Custom Cursor
12px dot with mix-blend-mode difference. Grows to 40px on hover over interactive elements.
Cursor Orb
Violet radial gradient orb that follows cursor with /12 easing. Static center orb + cursor-following orb.