LogoReactUI Library
HomeComponentsShowcaseThemesNServicesNNextGenNPricingContact

Resources

Theme ExtractorExtract palettes from any site or imageColor LabPick, mix, export & engineer colorsGalleryUI screenshots & inspirationBlogArticles & tutorialsDocumentationGuides & API referenceAboutCompany, mission & teamExamplesReal-world code examples
  1. Home
  2. /Components
  3. /Effects
R
ReactUI

A comprehensive React component library with beautiful design, accessibility, and developer experience in mind.

Product

  • Components
  • Documentation
  • Examples
  • Buttons
  • Cards

Resources

  • Getting Started
  • Installation
  • Theming
  • API Reference
  • Free PDF & Image Tools

Community

  • About Us
  • GitHub
  • Discord
  • Twitter

© 2026 ReactUI Library. All rights reserved.

Privacy PolicyTerms of ServiceRefund Policy
Components/Effects

Effects.

The micro-interactions that separate a template from a product. 3D tilts, magnetic pulls, spotlight tracking, conic borders and marquees — hover every tile, they all respond.

34 componentsHover to copyTransform-onlyNo motion library
ButtonsInputsBadges & ChipsCardsFormsLoadersNavigationOverlayFeedbackData DisplayText EffectsBackgroundsEffectsHero SectionsLandingBlog & ContentLayoutDashboardAI InterfacesE-commerceAuthSettings

On this page

  • Pointer tracking6
  • Hover transforms12
  • Borders & Surfaces8
  • Motion loops8

Interactive

Pointer tracking

Move your cursor over these. Each one reads the pointer position and feeds it into a transform or a CSS variable — no animation library involved.

6 variants
3D tilt
Signature

3D tilt

tsx
Spotlight
Signature

Spotlight card

tsx

Magnetic pull

tsx
Border glow

Border glow follow

tsx
Move here

Cursor trail

tsx
Parallax

Parallax layers

tsx

Transitions

Hover transforms

Lifts, scales, flips, reveals and staggered children. Everything animates transform and opacity only, so it stays on the compositor.

12 variants
Hover me

Lift

tsx
Hover me

Scale

tsx
Hover me

Rotate

tsx
Hover me

Skew

tsx
Hover me

Glow ring

tsx
Hover me

Saturate

tsx
123

Blur siblings

tsx

Image zoom

tsx
View project →

Overlay reveal

tsx
Front
Back
Signature

Flip card

tsx

Changelog

Added 9 new categories, 300+ components and a rebuilt gallery engine.

Expand height

tsx

Stagger children

tsx

Materials

Borders & surfaces

Conic borders, travelling beams, glass, grain and corner frames — the finishes that make a card look deliberate.

8 variants
Spinning
Signature

Conic border

tsx
Beams

Travelling beam

tsx
Hairline

Gradient hairline

tsx
Glass

Glass blur

tsx
Recessed

Inner shadow

tsx
Frame

Corner accents

tsx
Grain

Noise overlay

tsx
Sweep

Shine sweep

tsx

Ambient

Motion loops

Marquees, floats, breathing glows and orbits. All keyframe-driven and disabled automatically under prefers-reduced-motion.

8 variants
VercelStripeLinearVercelStripeLinear

Marquee row

tsx

Deploy succeeded

New signup

PR merged

Deploy succeeded

New signup

PR merged

Vertical ticker

tsx
Floating

Float

tsx
Breathe

Breathing glow

tsx
Hover me

Wobble on hover

tsx
Hover me

Shake on hover

tsx
Press me

Jelly press

tsx
Core

Orbiting dot

tsx

Previous

←Backgrounds

Aurora, mesh, grids, beams, noise and spotlight fields

Next

Hero Sections→

Aurora, spotlight, split and terminal heroes