Effects & Transitions

Magic UI effects and TPC transition patterns. Each one shows its motion token and has replay and reduced-motion controls.

Text (14)

Animated Gradient TextLooping gradient fill for headline words.Aurora TextAurora color wash inside text.HighlighterHand-drawn highlight annotation.Hyper TextScramble-to-reveal text.Line Shadow TextAnimated striped text shadow.Morphing TextBlur-morph between words.Number TickerCounts up to a value on enter.Shiny TextLight sweep across text.Sparkles TextTwinkling sparkles around text.Spinning TextText on a rotating circle.Text AnimatePer-word/char enter animations.Text RevealScroll-linked word reveal.Typing AnimationTypewriter effect.Word RotateRotates through words.

Backgrounds (13)

Animated Grid PatternGrid with fading squares.Dot PatternSVG dot background.Flickering GridCanvas grid that flickers.Grid PatternSVG grid background.Hexagon PatternHexagon tiling.Interactive GridGrid cells light on hover.Light RaysSoft animated light rays.MeteorsFalling meteor streaks.ParticlesCanvas particles reacting to the cursor.Progressive BlurGraduated blur edge.Retro GridPerspective grid scrolling to horizon.RippleConcentric ripple rings.Striped PatternDiagonal stripes.

Buttons (9)

Animated Theme TogglerTheme toggle using View Transitions.ConfettiConfetti celebration.Cool ModeParticle burst on click.Interactive Hover ButtonArrow slide-in on hover.Pulsating ButtonAttention pulse ring.Rainbow ButtonRainbow glow button.Ripple ButtonClick ripple from pointer.Shimmer ButtonCTA with shimmer sweep.Shiny ButtonButton with moving shine.

Cards & borders (5)

Bento GridFeature bento layout with hover reveal.Border BeamLight chasing around a border.Magic CardSpotlight follows the cursor.Neon Gradient CardGlowing neon border card.Shine BorderAnimated gradient border.

Lists & layout (9)

Animated BeamBeam connecting two elements.Animated ListItems enter one by one.Avatar CirclesOverlapping avatar pile.Circular ProgressAnimated circular gauge.DockmacOS-style magnifying dock.File TreeAnimated expandable file tree.MarqueeInfinite scrolling row.Orbiting CirclesIcons orbiting a center.Scroll ProgressReading progress bar.

Enter & exit (1)

Blur FadeBlur + fade in on enter/scroll.

Device frames (5)

Android FrameAndroid frame for screenshots.Code ComparisonSide-by-side code diff with highlight.iPhone FrameiPhone frame for screenshots.Safari FrameSafari window frame for screenshots.TerminalTyping terminal session.

Transitions (10)

Drawer TransitionSheet slide from edge.Enter / ExitFade + rise in with ease-out; shorter ease-in exit.Hover & PressHover lift and press scale on a spring.Layout TransitionShared-element indicator via layoutId.Modal TransitionDialog zoom 95→100 + fade.Scroll RevealReveal once when scrolled into view.Skeleton ShimmerLoading placeholder with linear shimmer.StaggerList items 40ms apart, capped at 400ms.Toast TransitionToast stack enter/exit.View Transitionsdocument.startViewTransition with reduced-motion guard.