Glin UI

31 free components

Animations

Copy-paste animated components for React and Tailwind. Hover a card to play it, then grab an AI prompt or the install command.

Animation components

Showing 31 of 31

  • Typewriter

    Character-by-character typing animation with blinking cursor and loop support.

  • Word Rotate

    Cycling text animation that rotates through an array of words.

  • Number Ticker

    Animated number counter triggered by scroll visibility via IntersectionObserver.

  • Reveal Text

    Text that reveals through a clip-path wipe animation triggered on view.

  • Chromatic Text

    Text with chromatic aberration effect, RGB channel splitting.

  • Aurora Background

    Animated gradient mesh backdrop with floating blurred blobs.

  • Animated Gradient

    Animated color-shifting gradient background with warm, cool, aurora, and glass presets.

  • Gradient Mesh

    Generative mesh gradient background using overlapping radial gradients.

  • Retro Grid

    CSS perspective grid with scrolling lines for retro-futuristic backgrounds.

  • Dot Pattern

    Static SVG dot grid background with configurable size, gap, and theme colors.

  • Particle Field

    Ambient floating particle system with CSS-only staggered animations.

  • Meteor Shower

    Falling diagonal streaks with staggered delays for hero backgrounds.

  • Light Leak

    Simulated lens flare and light leak overlay with drifting animation.

  • Blur Spotlight

    Cursor-following ambient glow effect for background layers.

  • Border Beam

    Light beam that travels along the border of its container via CSS offset-path.

  • Glow Border

    Rotating conic-gradient glow effect around container border.

  • Prism Border

    Animated rainbow refraction border using a shifting linear gradient.

  • Pulsating Button

    Button with a pulsing glow ring animation for attention-grabbing CTAs.

  • Shimmer Button

    Button with animated shimmer sweep overlay and glass-aware variants.

  • Ripple Button

    Button with liquid ripple effect on press.

  • Liquid Button

    Button with fluid hover lift, press squish, and radial shine effect.

  • Magnetic CTA

    Call-to-action button with subtle cursor-attraction on hover.

  • Morphing Tabs

    Tab component with a smoothly sliding indicator that morphs between items.

  • Depth Card

    Parallax tilt card with layered glass planes and glare effect on hover.

  • Spotlight Card

    Card with cursor-tracked radial spotlight effect on hover.

  • Glass Card

    Frosted card with depth-aware blur, refraction edge highlights, and elevation transitions.

  • Blur Fade

    Scroll-triggered entrance animation with blur, fade, and slide transitions.

  • Text Reveal

    Word-by-word opacity reveal driven by scroll position.

  • Marquee

    Infinite horizontal or vertical scrolling content with pause-on-hover support.

  • Orbiting Circles

    CSS-driven orbital animation that keeps children upright via double-rotate.

  • Ripple

    Concentric expanding rings radiating from center for decorative backgrounds.

Easing and timing

Every Glin UI animation reads from the same curve and duration tokens. Click a name to copy the variable, press play to feel the curve.

  • cubic-bezier(0.23, 1, 0.32, 1)

    Entrances and hovers. Fast start, soft landing.

  • cubic-bezier(0.77, 0, 0.175, 1)

    On-screen movement and morphs.

  • cubic-bezier(0.32, 0.72, 0, 1)

    Sheets, drawers, and docked panels.

  • 150ms

    Hover and press feedback.

  • 250ms

    Menus, tooltips, small reveals.

  • 400ms

    Large surfaces and page level shifts.

Reduced motion: when the visitor sets prefers-reduced-motion, every demo above and in the grid pauses or drops its transition. Animate only transform and opacity, and keep a still frame that carries the same meaning.