Animation
GSAP-powered animation components with automatic cleanup
CrystalTextReveal
Staggered text reveal animation using GSAP timelines. Items animate in sequence with optional hold, exit, and inline grouping.
CrystalTextReveal · skippable
A long intro should never hold the viewer hostage. With skippable, Escape or the Skip button jumps to the end, and onComplete still fires.
Status: Playing
CrystalScrollReveal
Content that arrives as it scrolls into view: up, fade, left or right, with an optional stagger over a fixed total. Reduced motion is a floor, not a prop.
Strategy
Arrives as it scrolls into view
Staggered over a fixed 0.3s total.
Design
Arrives as it scrolls into view
Staggered over a fixed 0.3s total.
Build
Arrives as it scrolls into view
Staggered over a fixed 0.3s total.
With reduced motion on, the cards are simply there: no tween is created.
// Before — a hand-rolled IntersectionObserver per app
// (ember-and-grain ScrollReveal.tsx, caitoy-cv Reveal.tsx)
<ScrollReveal />
<section className="reveal">…</section>
// After — one primitive, reduced motion built in
<CrystalScrollReveal from="up" amount={0.3}>
<Card /> <Card /> <Card />
</CrystalScrollReveal>CrystalCrossfade
Swap one view for another. Both layers share one cell while they fade, so nothing below moves. Under reduced motion it is an instant swap.
This week
12 tasks done · 3 in review · 1 blocked
CrystalBackdropText
Large background text that slides in and scales. Two variants: single (foreground only) and dual (foreground + scaled background).
Single Variant
Dual Variant
CrystalMagneticButton
GSAP-powered magnetic button that follows cursor movement within its bounds and snaps back with elastic easing. Respects prefers-reduced-motion.
Solid variant
Outline variant
strength=0.5
Additional Animation Components
CrystalCursorGhost renders a cursor-following ghost trail effect. CrystalScrollSmoother wraps GSAP ScrollSmoother for smooth page-level scrolling. Both are layout-level components best demonstrated in full-page contexts rather than isolated demos.
Usage
import {
CrystalTextReveal,
CrystalBackdropText,
CrystalMagneticButton,
CrystalCursorGhost,
CrystalScrollSmoother,
} from '@artasce/crystal-ui';
// Staggered text reveal
<CrystalTextReveal
sequence={[
{ text: 'hello', hold: 0.5, exit: true },
{ text: "i'm", inline: true },
{ text: 'cai', inline: true, highlight: true },
]}
/>
// Magnetic button
<CrystalMagneticButton variant="solid">
Start a Project
</CrystalMagneticButton>
// Backdrop text
<CrystalBackdropText text="work" variant="dual" />