The Devx100 collection / components

Small pieces.
Big possibilities.

Free, working components to explore without an account. Press, hold, drag and hover to see what each one does.

NewKit
MarbleLoop
Backgrounds · WebGL
NewKit
DotwaveHover · Loop
Backgrounds · WebGL
New
LaptopHover · Press
Device frames
New
PhoneLoop
Device frames
Kit
Voice orbPress · Select · Loop
Page bits
New
Command paletteType · Select
Lists
New

A cone of light from above with a faint flicker, like a spot on a stage.

Stage lightLoop
Hero backgrounds
New

Hundreds of particles tracing a slow, curling current.

Flow fieldLoop
Hero backgrounds
New

Slim vertical beams of accent light that sweep across the hero.

Light beamsLoop
Hero backgrounds
New

A receding grid floor that slides toward you, like a horizon line.

Perspective floorLoop
Hero backgrounds
New
Dynamic islandPress · Select
Notifications
Photo deckDrag · Swipe
Cards & content
Kit
Pricing + togglePress · Select
Cards & content
Kit
Compare sliderDrag · Slide
Cards & content
Kit
Approval flowLoop
Diagrams
Kit
Orbit ringLoop · Hover
Diagrams
Kit
Signal hubLoop
Diagrams
Kit
Product UIsLoop
Motion loops
New
Browser windowLoop
Device frames
New
Toast stackHover · Press
Notifications
New
DockHover
Pointer
Liquid togglePress
Controls
Tick sliderDrag · Slide
Controls
Roll counterPress · Hold
Controls
New
Hold to confirmPress · Hold
Buttons
Segmented chartSelect
Controls
New
Reorder listDrag
Lists
New
Swipe to deleteSwipe
Lists
New
Flip boardPress
Text
New
Number tickerScroll · Press
Text
New
Word rotatorLoop
Text
New
Gradient textLoop
Text
New
Ripple buttonPress
Buttons
New
Magnetic buttonHover
Buttons
Kit
Feature tabsSelect
Cards & content
Kit
FAQ accordionPress
Cards & content
Kit
Quote wallLoop · Hover
Motion loops
Kit
Live cellsLoop
Motion loops
New

Falling characters in the accent colour, brighter at the head of each column.

Code rainLoop
Hero backgrounds
New

Layered sine ribbons rolling slowly under the headline.

Wave linesLoop
Hero backgrounds
New

Soft out-of-focus discs floating upward, like city lights at night.

BokehLoop
Hero backgrounds
New

Twinkling stars that drift with the pointer, nearer ones faster.

StarfieldHover
Hero backgrounds
New

Thin streaks that cut diagonally across the hero at random.

MeteorsLoop
Hero backgrounds
New

Rings that expand from the middle and fade, like a drop in water.

RipplesLoop
Hero backgrounds
New

The headline resolves out of random characters, left to right.

Headline effectsLoop
Text
New

A dot and a trailing ring replace the pointer; the ring swells over links and buttons.

Pointer & click effectsHover
Pointer
New

Images and screenshots drift at a slower pace than the text around them.

Scroll effectsScroll
Scroll
New

A soft specular highlight slides across the card face under the pointer.

Card hover effectsHover
Cards & content
New

Primary buttons catch a moving sheen every few seconds.

Button & detail effectsLoop
Buttons