Free
Aurora Background
Soft, drifting aurora light behind a hero headline. Three blurred color fields move on slow, non-repeating paths.
Constellation Field
Drifting particles that link into a living network and respond to the cursor. Canvas, retina-sharp, pauses off-screen.
Web · vanilla JStestedWeb · React / Next.jsadaptableWeb · Vue / Nuxtadaptable
Good for
- AI / tech product hero
- data or network themed section
- login backdrop
Tags
Install as a skill
- Tune the preview above, then press Copy install prompt and paste it into your agent. It reads the install guide and runs the MotionPantry CLI.
- Approve the connection in your browser the first time. The skill lands in your agent’s skills folder as
motionpantry-constellation-field. - Ask your agent:
Use the
motionpantry-constellation-fieldskill to add Constellation Field to my AI / tech product hero.
Or run it yourself:
# Claude Code npx --yes motionpantry@latest install constellation-field --agent claude-code # Codex, Cursor, Gemini CLI or OpenCode npx --yes motionpantry@latest install constellation-field
Copying the install prompt needs a free account, for free and Pro skills alike.
Design intent
Target
A quiet field of glowing points (#c7d2fe) on #05060a. Nearby points connect with thin lines (#6366f1) that fade with distance, so the network keeps forming and dissolving as the points drift. It should read as "intelligence / connection", and stay calm enough to sit behind text.
Motion rhythm
- Points drift in straight lines at slow, varied speeds (12–34 px/s at speed 1, here 0.6×) and wrap around the edges.
- Lines appear when two points come within 140px. Their opacity rises smoothly as the points get closer; nothing pops in.
- Pointer mode is attract:
- attract = points within 180px are gently pulled in and link to the cursor
- repel = points are pushed away
- off = no pointer reaction
- With
prefers-reduced-motion, drift slows to 20%.
Must keep
- Density stays constant across screen sizes. 110 points is the density for a 1280×800 area, and the count scales with the container's area (capped at 2×).
- Retina-sharp rendering (devicePixelRatio, capped at 2).
- Points have a soft glow (shadow blur about 6px) and slightly varied sizes around 1.5px.
- Lines are 1px and never brighter than 55% opacity, so the background stays a background.
Avoid
- Strobing, bright full-opacity lines, and particles bunching at the edges.
- Blocking page scroll on touch devices (
touch-action: pan-y).
Acceptance checks
Key states
- Idle: points drift evenly across the container, and links form and fade continuously.
- Pointer over (attract/repel): nearby points move toward or away from the cursor and link to it. When the pointer leaves, they return to plain drift.
- Resize: the field rescales without bunching. The point count follows the container area.
- Off-screen: the animation pauses.
Checks
- The colors, density (110 per 1280×800), link distance 140px, speed 0.6× and pointer mode "attract" match the parameters.
- It is sharp on retina screens, with no blurry canvas.
- Touch-scrolling the page over the effect still scrolls on mobile.
- It runs at 60fps with the default count on a mid-range laptop and 30fps or better on a mid-range phone.
-
destroy()removes the canvas and all listeners.
Changelog
- v1.1.02026-10-25Repackaged in the v2 skill format: generic SKILL.md, instance.json with your settings, TASK.md, build and check scripts.
- v1.0.02026-10-21Initial release.
More from the pantry
All skillsPremium
Spotlight Cards
A feature-card grid where a soft light follows the cursor, lighting borders and surfaces across neighbouring cards.
Free
Morphing Action Button
One outline that tightens from a button into a loading ring, draws a check, then opens into a success label. A continuous response instead of three swapped components.