Appear in view
Scroll down
React to your pointer
Scroll down
Stay in place
Scroll down
Driven from a variant
Inside the Button and the Switch, a variant drives the sweep: hover the button, flip the switch.
Click me
Use it
Put the Dreamlike Pattern component in any frame, make it fill the frame, keep the frame’s overflow clipped — then choose how it starts and how it looks.
Trigger
Parent hover (the frame around it), In view (once scrolled into the viewport), Always, or Expanded prop to drive it from a variant.
Movement
From pointer follows the side the cursor came from; or force Left, Right, Up or Down.
Shape
Lines, squares or triangles: dashes are drawn on a canvas, so hundreds of them stay smooth.
Weight and grain
Weight is the thickness of each stroke; grain the size of the dashes. Small weights suit buttons, large ones full sections.
Speed and colours
Speed sets the pace of each wave; Color 1, 2 and 3 alternate stroke after stroke — the design system's accents by default.
Respectful
It pauses off screen and honours reduced motion: the frame simply fills, without the sweep.
Properties — Trigger · Expanded · Movement · Shape · Weight · Grain · Speed · Color 1 · Color 2 · Color 3