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.
NewKitMarbleLoop
Backgrounds · WebGLNewKitDotwaveHover · Loop
Backgrounds · WebGLNewLaptopHover · Press
Device framesNewPhoneLoop
Device framesKitVoice orbPress · Select · Loop
Page bitsNewCommand paletteType · Select
ListsNewA cone of light from above with a faint flicker, like a spot on a stage.
Stage lightLoop
Hero backgroundsNewHundreds of particles tracing a slow, curling current.
Flow fieldLoop
Hero backgroundsNewSlim vertical beams of accent light that sweep across the hero.
Light beamsLoop
Hero backgroundsNewA receding grid floor that slides toward you, like a horizon line.
Perspective floorLoop
Hero backgroundsNewDynamic islandPress · Select
NotificationsPhoto deckDrag · Swipe
Cards & contentKitPricing + togglePress · Select
Cards & contentKitCompare sliderDrag · Slide
Cards & contentKitApproval flowLoop
DiagramsKitOrbit ringLoop · Hover
DiagramsKitSignal hubLoop
DiagramsKitProduct UIsLoop
Motion loopsNewBrowser windowLoop
Device framesNewToast stackHover · Press
NotificationsNewDockHover
PointerLiquid togglePress
ControlsTick sliderDrag · Slide
ControlsRoll counterPress · Hold
ControlsNewHold to confirmPress · Hold
ButtonsSegmented chartSelect
ControlsNewReorder listDrag
ListsNewSwipe to deleteSwipe
ListsNewFlip boardPress
TextNewNumber tickerScroll · Press
TextNewWord rotatorLoop
TextNewGradient textLoop
TextNewRipple buttonPress
ButtonsNewMagnetic buttonHover
ButtonsKitFeature tabsSelect
Cards & contentKitFAQ accordionPress
Cards & contentKitQuote wallLoop · Hover
Motion loopsKitLive cellsLoop
Motion loopsNewFalling characters in the accent colour, brighter at the head of each column.
Code rainLoop
Hero backgroundsNewLayered sine ribbons rolling slowly under the headline.
Wave linesLoop
Hero backgroundsNewSoft out-of-focus discs floating upward, like city lights at night.
BokehLoop
Hero backgroundsNewTwinkling stars that drift with the pointer, nearer ones faster.
StarfieldHover
Hero backgroundsNewThin streaks that cut diagonally across the hero at random.
MeteorsLoop
Hero backgroundsNewRings that expand from the middle and fade, like a drop in water.
RipplesLoop
Hero backgroundsNewThe headline resolves out of random characters, left to right.
Headline effectsLoop
TextNewA dot and a trailing ring replace the pointer; the ring swells over links and buttons.
Pointer & click effectsHover
PointerNewImages and screenshots drift at a slower pace than the text around them.
Scroll effectsScroll
ScrollNewA soft specular highlight slides across the card face under the pointer.
Card hover effectsHover
Cards & contentNewPrimary buttons catch a moving sheen every few seconds.
Button & detail effectsLoop
Buttons