Framer component

WebGL

No code

Particle Flow Curves

Streams of particles that sweep across your section, scatter into a confetti trail and part around the cursor. Pick a colour mode and a trigger. No code.

Move your cursor through the stream

Colour

Four ways to colour the stream

Keep it one colour, run a gradient across the screen or from head to tail, or let every particle in the trail pick its own colour from your palette.

Solid

One colour, any colour. Bind it to a colour style and it follows your theme.

Path gradient

Blends from your primary to your secondary colour across the width of the section.

Head to tail

The bright head starts in one colour and fades into another as it scatters.

Multi-colour trail

The head stays bright while every trailing particle takes its own colour from your palette.

Trigger

Loop it, play it once, or drive it with scroll

Choose how the stream starts. Every trigger stops drawing while the section is off-screen.

Loop

Sweeps across, rests, then comes back the other way. Set the sweep time and the pause.

In view

Plays one sweep when the section scrolls into view. Replay it on every visit, or only the first.

Scroll

The stream follows the page. Scroll down and it travels; scroll back up and it rewinds.

Streams & cursor

Up to three streams. One cursor to part them.

Add streams and they fan out and launch on a stagger, never all at once. Move your cursor through them and the particles bend around it, then flow back together.

Settings

Every setting, in plain words

All of it lives in Framer’s right panel. Settings that don’t apply to your choices stay hidden.

Colour

Solid, Path, Tail or Multi. Primary and Secondary accept your colour styles.

Colour

Solid, Path, Tail or Multi. Primary and Secondary accept your colour styles.

Trail

Up to eight colours for Multi mode. Each particle keeps the colour it picks.

Trail

Up to eight colours for Multi mode. Each particle keeps the colour it picks.

Particles

From 300 to 4,000. Smaller screens automatically draw fewer.

Particles

From 300 to 4,000. Smaller screens automatically draw fewer.

Streams

One, two or three streams that fan out and launch on a stagger.

Streams

One, two or three streams that fan out and launch on a stagger.

Trigger

Loop, In View or Scroll. In View can replay on every visit.

Trigger

Loop, In View or Scroll. In View can replay on every visit.

Sweep Time & Pause

How long one pass takes, and how long it rests before the next.

Sweep Time & Pause

How long one pass takes, and how long it rests before the next.

Tail Life

How long the scattered tail lingers before it fades out.

Tail Life

How long the scattered tail lingers before it fades out.

Cursor

Radius and Force set how wide and how hard the stream parts. Off on touch screens.

Cursor

Radius and Force set how wide and how hard the stream parts. Off on touch screens.

Performance

WebGL rendering, stops drawing off-screen, and shows a still frame to visitors who prefer less motion.

Performance

WebGL rendering, stops drawing off-screen, and shows a still frame to visitors who prefer less motion.

Particle Flow Curves

A Framer component by Omakase Design