Coding · UI Components

UI Components

112 animated parts for React. Pick one, play with it, take the code.

Pull CordFreeA light-switch cord you tug to flip the theme.
StampA rubber stamp that slams down with real ink.
Split-FlapText that flips into place like a departure board.
Scratch CardScratch off the foil to reveal what is underneath.
Holo FoilA card printed on foil that catches the light.
Tear-Off StickerPeel a sticker by its corner to see what is under it.
Shatter ButtonBreaks into shards where you click, then flies back together.
Gravity TextLetters come loose, fall, bounce and climb back.
Pixel DissolveContent leaves as dithered pixels and comes back the same way.
CRT Power-OffSwitches content off like an old television.
Typo TypewriterTypes like a person: slips, notices, fixes.
Synth KnobA rotary knob from a synth, with detents.
Slot ReelSpins through a list and lands on the winner.
Bubble WrapFreeA sheet of bubbles that pop. Pure fidget.
Jelly SwitchA toggle whose knob is made of jelly.
Flock CursorA flock of birds that follows the pointer.
Border BeamFreeA light that travels the border of any container.
Border TracerDraws a border as one stroke on hover, focus, arrival or state.
Spotlight BorderCreativeLights only the stretch of border nearest the pointer.
HUD FrameCorner brackets, ticks and a caption around real content.
Terminal FrameA terminal that types its commands and prints their output.
Light SweepOne pass of light across a surface.
Border PulseCreativeRings leave the border like sonar: this is live.
Moving BorderFreeMarching ants: dashes travelling round the edge.
Cursor BorderA border that turns toward the pointer from a distance.
Gradient BorderCreativeA gradient that slowly turns around the edge.
Glow BorderCreativeA soft light around a lit panel, breathing slowly.
Edge GlowCreativeA bright line along one edge, lit from above.
Corner GlowCreativeLight pooling in one corner, leaning in on hover.
Animated CornersCorner brackets that close into a full frame.
Corner FrameA panel with cut-steel chamfered corners.
Tech FrameAn instrument panel: title tab, segments, status light.
Window FrameCreativeA desktop window you can drag and roll up.
Browser FrameCreativeBrowser chrome whose address types itself in.
Device FrameA phone, tablet, laptop or watch drawn around real content.
Scanner FrameA beam sweeping over content while it is checked.
Focus FrameOne frame for a group, gliding to what you point at.
Animated DividerCreativeA divider that draws itself and carries a signal.
ScanlineThe texture of an old monitor over content.
Edge TracerOne comet round the edge: an acknowledgement.
Magnetic ButtonFreeLeans toward the pointer and springs back.
Hold ButtonConfirm by holding, from a pointer or the keyboard.
Shimmer ButtonCreativeA solid button with a slow pass of light.
Border Beam ButtonAn outline button with a light running round it.
Morph ButtonA button that becomes the form it stands for.
Gooey ButtonA liquid button that buds droplets on hover.
Spotlight ButtonCreativeA quiet button lit from where the pointer is.
Ripple ButtonCreativeA ring and a wave from the exact point of contact.
Press ButtonFreeA button with real travel, like a mechanical key.
Loading ButtonCreativeCarries its own outcome: spinner, tick or shake.
Liquid ButtonFills to the brim with a rolling wave on hover.
Expand ButtonCreativeAn icon that grows its label when you reach for it.
Icon Morph ButtonMenu into close, play into pause: the strokes travel.
Animated Icon ButtonIcons that act out what they do.
Decode TextFreeText that resolves from scrambled glyphs, left to right.
Number TickerCreativeRolls each digit to its new value, like a mechanical counter.
Blur TextCreativeWords come into focus one at a time.
Reveal TextCreativeEach word rises out of its own slot.
Scramble TextOld text scrambles into the new.
Typewriter TextCreativeTypes, holds, deletes and types the next.
Morphing TextWords that melt into each other.
Rotating TextCreativeOne slot in a sentence that keeps turning over.
Sliding TextLetters roll over on hover like a rolling sign.
Masked TextBig letters as a window onto a moving image.
Gradient TextCreativeA slow gradient flowing through the letters.
Shimmer TextFreeA band of light sweeping across muted text.
Glitch TextA signal breaking up in short bursts.
Split TextThe workhorse: letters or words in, with an effect and an order.
Wave TextLetters bob in a travelling wave.
Text LoopLoops through any content, not only words.
Counter TextCreativeA number that counts up when it arrives.
MarqueeCreativeAn endless row that drifts sideways.
Infinite TickerA ticker tape that speeds up when you scroll.
Spotlight CardCreativeA surface lit from where the pointer is.
Magnetic CardLeans toward the pointer; its contents travel further.
Tilt CardReal 3D: layers lift off the face as it turns.
Glow CardCreativeA card floating over its own light.
Border Beam CardThe highlighted card, with a light round its border.
Reveal CardA cover that gives way to its details.
Expandable CardCreativeGrows in place and pushes the rest down smoothly.
Morphing CardClick the card and the card becomes the dialog.
Flip CardCreativeTwo faces that turn over in 3D.
Stack CardA deck you fling through, left or right.
Parallax CardA window onto a scene in layers.
Cursor CardThe pointer becomes a label that says what a click does.
Bento CardBento grid cells that lift and invite.
Feature CardFreeThe feature card, done with care.
Stat CardCreativeA metric that tells its own story.
Floating CardCreativeHangs in the air with a shadow that breathes.
Interactive CardA working card: select it, act on it.
Perspective GridA floor of grid lines receding to a horizon.
Animated GridA fine grid where single cells light up and fade.
Dot GridFreeA matrix of dots that wakes up under the pointer.
Moving GridCreativeA flat grid that slides steadily one way.
StarfieldA deep field of stars drifting in three depths.
Particle FieldDrifting points that join into a loose network.
Noise BackgroundCreativeSoft clouds of smooth noise that slowly evolve.
Grain BackgroundCreativeFilm grain that takes the flatness off a surface.
Aurora BackgroundCurtains of soft light that sway like an aurora.
Beam BackgroundThin beams of light falling down faint rails.
Spotlight BackgroundCreativeStage light sweeping slowly across the scene.
Radial GlowCreativeOne soft pool of light you can place anywhere.
Cursor GlowA soft light that follows the mouse around a section.
Mesh GradientCreativeSoft colour fields that melt together and wander.
Animated GradientFreeA gradient that drifts slowly across its colours.
Gradient MeshA rolling surface drawn in lines, shaded by depth.
Light RaysRays fanning down from above, slowly turning.
Shooting StarsA quiet sky where a streak crosses now and then.
Warp FieldStars rushing out of a vanishing point.
Shader BackgroundMarbled flow rendered on the graphics card.
InterferenceAn evolving sculpture of interwoven silver filaments.
Scanline BackgroundA whole phosphor screen to set content on.