Rad UI FX

Rad UI FX is a collection of animated React components that stay accessible: 90 effects across text, backgrounds, interactions, components and loading feedback, each with a written accessibility contract.

All effects

Every card below is live. Open one for its install command, accessibility contract and props.

• Ship interfaces people rememberShip interfaces people remember

  Text

  BlurReveal

  Text that fades in from a soft blur, word by word or letter by letter. Screen readers get the whole sentence once; reduced motion shows it instantly.

• Accessible motion, typed out.Accessible motion, typed out.

  Text

  Typewriter

  Types text out character by character with a caret. Screen readers get the full text immediately and nothing reflows while typing.

• ACCESS GRANTEDACCESS GRANTED

  Text

  ScrambleText

  Text that decodes from random characters into its final form, on view, on hover, or on mount.

• Thinking about your request…

  Text

  ShimmerText

  A soft highlight sweeping across real, unsplit text.

• Make it unforgettable

  Text

  ColorShiftText

  Text filled with a slowly flowing multi-colour gradient.

• Interfaces that feel fast, accessible, alive or yoursfastaccessiblealiveyours

  Text

  WordCycle

  An inline slot that cycles through words, sized to the longest so the sentence never jumps.

• 6666Components

  12,84012,840Weekly installs

  $49.5$49.5Saved per seat

  Text

  CountTo

  A number that counts up to its value when it scrolls into view, formatted with Intl.NumberFormat.

• Good vibrationsGood vibrations

  Text

  WaveText

  Letters that ripple in a travelling wave, continuously or on hover.

• SYSTEM_OVERRIDESYSTEM_OVERRIDESYSTEM_OVERRIDESYSTEM_OVERRIDE

  Text

  GlitchText

  Text that breaks into offset colour slices in short, occasional bursts.

• Motion should never cost anyone access to the content, and every effect here proves it.

  Text

  MarkerHighlight

  A highlighter stroke that sweeps behind words as they scroll into view.

• Design that feels handmade

  Text

  InkUnderline

  A hand-drawn squiggle that draws itself under a word, on view or on hover.

• Now boardingNOWBOARDING

  Gate 42GATE42

  Text

  SplitFlap

  Departure-board tiles that flip through characters before landing on the text.

• Make it liquid, smooth, yours or aliveliquidsmoothyoursalive

  Text

  MorphWords

  Words that melt into one another with a gooey liquid morph.

• Move your pointer over meMove your pointer over me

  Text

  SpotlightText

  A pool of coloured light that follows the pointer across text.

• RAD FX

  Text

  ExtrudedText

  Chunky 3D extruded lettering that tilts toward the pointer.

• SCROLL TO EXPLORE • RAD UI FX •

  Text

  CircularText

  Text running around a slowly turning circle, with an optional centre icon.

• Open late

  Text

  NeonText

  A glowing neon sign with a rare, gentle flicker.

• Build something bright

  Backgrounds

  AuroraBackdrop

  Soft drifting colour glow behind any content. Decorative only, pauses offscreen, and stays still under reduced motion.

• Enter the grid

  Backgrounds

  GridBackdrop

  A perspective grid gliding toward the viewer and fading at the horizon.

• Quietly alive

  Backgrounds

  DotField

  A dim dot grid with a soft pool of light drifting across it.

• Night shift

  Backgrounds

  Starfield

  A field of softly twinkling stars, generated from a seed so server and client match.

• Make a wish

  Backgrounds

  MeteorShower

  Occasional streaks of light falling across the background.

• Keyboard ready

  Move the pointer over the card, or tab to the link.

  Learn more

  Pointer aware

  Move the pointer over the card, or tab to the link.

  Learn more

  Interactions

  GlowCard

  A card whose surface lights up under the pointer, and around keyboard focus.

• Gentle tilt

  Capped at 8°, off for touch and for reduced motion.

  Interactions

  PerspectiveCard

  A card that tilts gently toward the pointer, with an optional glare.

• Get startedStronger pull

  Interactions

  Magnetic

  Pulls a button or link a little toward the pointer.

• Celebrate

  Clicked 0 times

  Interactions

  ClickBurst

  A small burst of sparks from wherever a button is clicked.

• Reveal

  on

  scroll

  Interactions

  RevealOnScroll

  Content that fades and slides into place as it scrolls into view.

• Pro plan

  Draw the eye without moving the layout.

  Components

  OrbitBorder

  A comet of light running around an element's border.

• AcmeGlobexInitechUmbrellaHooliStarkWayneWonka

  AcmeGlobexInitechUmbrellaHooliStarkWayneWonka

  Pause

  Components

  Marquee

  A seamless, infinitely scrolling row of items: logos, testimonials, tags.

• OverviewActivitySettings

  Arrow keys move between tabs. The indicator just follows.

  Components

  SlidingTabs

  Rad UI Tabs with an indicator that slides between triggers and content that fades in.

• Analog warmth

  Backgrounds

  NoiseGrain

  A film-grain overlay that gives flat surfaces texture, optionally shimmering.

• Ride the wave

  Backgrounds

  WaveLines

  Layered waves drifting along the bottom edge, back waves slower for depth.

• Center stage

  Backgrounds

  LightBeams

  Stage lights shining down from the top edge, gently swaying.

• Fizz

  Backgrounds

  BubbleField

  Soft bubbles rising and drifting, seeded so server and client match.

• Live now

  Backgrounds

  PulseRings

  Rings radiating out from a centre: live status, radar, "on air".

• Upgrade to ProHover or tab

  Interactions

  Shine

  A band of light that sweeps across a button or card on hover and keyboard focus.

• Press meOr press Enter

  Interactions

  PressRipple

  A ripple that spreads from exactly where a button is pressed.

• Ship it

   

  Interactions

  ConfettiBurst

  A burst of confetti from wherever a button is clicked.

• Depth on demand

  Interactions

  PointerParallax

  Layers that drift with the pointer at different depths.

• Front

  Use the button to turn the card.

  Back

  Only this side is reachable now.

  Show back

  Interactions

  FlipCard

  A card that turns over in 3D to reveal its back.

• • Design tokens
  • Motion presets
  • Accessible defaults
  • Copy-paste source
  • Agent-ready registry

  Interactions

  StaggerList

  List items that fade up one after another as the list scrolls into view.

• Respect reduced motionKeep focus visibleNever animate for its own sake

  Components

  DrawCheckbox

  A native checkbox whose tick draws itself in.

• 1,2840123456789,012345678901234567890123456789

  −137+249

  Components

  Odometer

  Numbers that roll digit by digit like a mechanical counter.

• HomeSearchMusicMailSettings

  Components

  Dock

  A toolbar of icon buttons that swell as the pointer passes over them.

• Reduce motion everywhereHaptic feedback

  Components

  ToggleSwitch

  An on/off switch whose knob squishes on press and springs across.

• 01Accessible motion

  02Copy-paste source

  03Agent-ready registry

  04Reduced-motion states

  Previous1 / 4Next

  Card 1 of 4

  Components

  CardStack

  A deck of cards you page through, the front card flying to the back.

• 18%

  Feedback

  ProgressRing

  A circular progress indicator, determinate or spinning.

• Loading profile

  Feedback

  Skeleton

  A loading placeholder with a soft shimmer.

• Did the release go out?Ada is typing

  Feedback

  TypingIndicator

  Three bouncing dots for "someone is typing".

• Loading messagesLoading audioSyncing

  Feedback

  Loader

  A small loader in three styles: dots, bars or orbit.

• Motion with manners.Accessible by default.

  Text

  WipeReveal

  An editorial wipe: a colour bar sweeps across and leaves the text behind it.

• Drop it like it's hotDrop it like it's hot

  Text

  LetterDrop

  Letters that fall in from above and land with a small bounce.

• Animation should be decoration communication

  Text

  StrikeSwap

  A word gets struck out and its replacement springs in.

• FILL ME UP

  Hover to fill

  Text

  FillText

  Outlined letters that flood with colour, in view or on hover.

• Groovy

  Backgrounds

  LavaLamp

  Wax-like blobs that rise, sink and merge behind content.

• Summer night

  Backgrounds

  Fireflies

  Little lights wandering on their own paths and glowing on and off.

• READY_

  Backgrounds

  CrtOverlay

  Scanlines, a slow rolling band and a vignette over any content.

• FX

  Backgrounds

  HaloGlow

  A slowly turning, blurred colour halo behind a logo, avatar or button.

• SearchInboxCalendarFilesPeopleSettings

  Interactions

  Flashlight

  Hovering darkens everything except a beam that follows the pointer.

• • KyotoTemples, tea and quiet lanes.
  • ReykjavikNorthern lights and hot springs.
  • MarrakeshSouks, spice and rooftops.
  • PatagoniaGlaciers at the end of the world.

  Interactions

  ExpandStrip

  A row of panels where the one under the pointer or focus widens to show more.

• After

  Before

  Interactions

  CompareSlider

  A before/after comparison with a draggable divider.

• npx shadcn@latest add https://www.rad-ui.com/r/copy-button.json

  Interactions

  CopyButton

  A copy button whose icon morphs into a check.

• Components

  ExpandSearch

  A search button that widens into a field.

• 1. 1Cart (completed)
  2. 2Shipping
  3. 3Payment
  4. 4Review

  BackNext

  Components

  Stepper

  Progress steps whose connecting line fills as you advance.

• 2New notificationMark all read

  Components

  NotificationBell

  A bell that rings and pops its badge when the unread count goes up.

• Is it accessible?

  Yes: it is a native details element, so keyboard, screen readers and find-in-page all work.

  Does it need JavaScript?

  No. The animation is pure CSS, and it still opens without it.

  What about reduced motion?

  It opens instantly, with no height animation.

  Components

  SmoothDetails

  A native <details> disclosure with an animated height.

• 1. Backup complete

     128 files saved.

  2. New comment

     Ada replied to your PR.

  3. Deployment finished

     rad-ui.com is live.

  Add toast

  Feedback

  ToastStack

  Stacked toast notifications that fan out on hover or focus.

• Payment complete

  Play again

  Feedback

  SuccessCheck

  A ring and tick that draw themselves, then pop.

• Installing dependencies20%

  Waiting for server

  Feedback

  ProgressBar

  A progress bar with a moving sheen, determinate or indeterminate.

• Password

  Good

  Feedback

  StrengthMeter

  Four bars that fill and change colour with strength, e.g. for passwords.

• Stormy weather

  Backgrounds

  Rain

  Slanted rain streaking down behind content.

• Let it snow

  Backgrounds

  Snowfall

  Snowflakes drifting down and swaying.

• Head in the clouds

  Backgrounds

  DriftClouds

  Soft clouds sailing slowly across.

• City lights

  Backgrounds

  Bokeh

  Out-of-focus light orbs, breathing and drifting.

• Still water

  Backgrounds

  RippleDrops

  Rings spreading out from drops on a still surface.

• Living colour

  Backgrounds

  MeshGradient

  Four soft colour fields drifting around each other: a living gradient mesh.

• Golden hour

  Backgrounds

  Sunburst

  Rays fanning out from a point, turning very slowly.

• Into the swirl

  Backgrounds

  Vortex

  A slow spiral of colour fading toward the edges.

• Under construction

  Backgrounds

  StripeFlow

  Diagonal stripes gliding along, softened at the edges.

• Print shop

  Backgrounds

  Halftone

  Print-style halftone dots with a band of large dots sweeping across.

• Hive mind

  Backgrounds

  HexGrid

  A honeycomb grid with a pool of light drifting across it.

• Make some waves

  Backgrounds

  TileWave

  A grid of tiles lighting up in a diagonal wave.

• Off the map

  Backgrounds

  ContourLines

  Topographic contour rings around slowly wandering peaks.

• Connect the dots

  Backgrounds

  Constellation

  Stars joined to their nearest neighbours, gently twinkling.

• FX

  Backgrounds

  OrbitSystem

  Planets circling concentric orbits behind centred content.

• イ0ウ<01カケ3キウ80>}サ7コア{サ=<セ8カス8アア0{47ス2/セ013<{6*}87+<イウ2{シ2コ03+69<ウセカ7<5**>サ5+ス4オ53ケ}イ/ウソ}ア7エコ*65/7>オキオ574+キス1ソ3コ7ア0<ウエキオ{</スウシケオオセクア30ス+}キ<アキス*サ3カ4>ア*7{23{5{{4ケ4+2キカカ>6サク=9ソ}セ/ソシ<ス7ク<ソ7クイキ76+ケ8ケ{ク05/}{89セウク4225ウ=**/イソ2エ44/9ケ32カエシ9サウスイサエサス<セ90<><ソ+コススコ<>セ3セセイケソ<<キ10525キ/サ{コ{ス3アオオソ7イケ6ウアシ+コイオキ62キ2オ>ウ5カ<カウ/スサ{{>サ75/8セ7ソサケ}4イエソ78ソ9ク<セア3ソ1*セオセキイ4ウ6エ6ソ60セ28ソセ203/エ/3カ}+903クシカ{エ80サエ3{ソ0ウ}9{スソ4=オ31コ*サ=オ{エ1キイカサオサ8サシセ929=7/コ=965<イセス86オ70セセイ

  Wake up

  Backgrounds

  CodeRain

  Columns of glyphs streaming down, brightest at the leading edge.

• Signal path

  Backgrounds

  CircuitTraces

  Right-angled circuit traces with pulses of light running along them.

• Turn it up

  Backgrounds

  EqualizerBars

  An audio equaliser along the bottom edge, each bar on its own beat.

• Engage

  Pause tunnel

  Backgrounds

  WarpTunnel

  Rounded frames rushing toward the viewer, like flying down a tunnel.

• Punch it

  Pause stars

  Backgrounds

  Hyperspace

  Stars stretching into streaks as they rush out from the centre.

How it's different

• Accessible by contract. Every component documents and ships its reduced-motion behaviour, what screen readers hear, and how it treats focus. The rules travel with the code, so your agent sees them too. Read the accessibility contract.
• You own the code. Components are copied into your project through the shadcn CLI, not installed as a black box. Change anything.
• No animation library required. Most effects are plain CSS. When an effect genuinely needs a library, it says so up front.
• Built on Rad UI. Interactive effects use Rad UI primitives for behaviour and ARIA, so the animation never comes at the cost of keyboard or screen reader support.

Get started

Install any component in one command:

bash
npx shadcn@latest add https://www.rad-ui.com/r/blur-reveal.json

See Installation for agents and manual setup, then browse the components in the sidebar.