← Back to Skills / Marketplace / interactive-constellations
SKL · 35PRO

Interactive Constellations.

A living web of glowing dots drifting across a black screen, connected by thin fading lines — and it reacts to your cursor, scattering and brightening as you move. A background that feels like it's paying attention.

UNLOCK WITH PRO →
● Live preview · Interactive Constellations demo
● Live canvas — it reacts to your cursor
↗ New tab
01 · The Vibe

Interactive Constellations is a constellation background — a field of small glowing dots drifting slowly across a black screen, with thin lines connecting nearby dots into a living web. The real magic is that it reacts to you: as you move your cursor, the network brightens and scatters away from it, so the whole thing feels alive and responsive instead of just decorative. It's that "wait, the background is moving with me" moment that makes a page feel high-tech and intentional. This is the skill for a hero background that quietly invites people to play with it.

● Looks Like
Network and connection visualizationsThe plexus/particle webs on tech and AI product sitesSci-fi data-grid backdropsNeural network diagrams brought to lifeThe kind of dark, interactive hero that makes you move your mouse around just to watch it react
02 · Best For / Avoid If
＋ Best For
+Hero sections for tech, AI, and developer products
+Data, network, and infrastructure platforms
+SaaS products that want to feel intelligent and connected
+Launch pages and waitlist screens that benefit from a little interactivity
+Portfolio sites for engineers and technical founders
+Any dark-themed page where you want the background to feel responsive, not static
× Avoid If
×Your design is light or minimal — Interactive Constellations lives on a black background and won't fit a bright, airy look
×Your brand is warm, soft, or playful — the connected-network aesthetic reads as technical and precise
×You need top performance on low-end devices — it runs a live canvas animation that uses some CPU
×The cursor interaction would be wasted, like behind heavy content users can't reach (though you can turn interaction off)
03 · Design Philosophy
01

Interaction makes it feel alive

The signature of Interactive Constellations is the way the network responds to the cursor — dots scatter away and lines brighten as you move through them. That responsiveness is what separates it from a static background and makes the page feel like it's paying attention to you. The interaction is the whole point, so it's worth keeping on wherever people can actually reach it.

02

Connection is the metaphor

The effect is a web of dots linked by lines, which naturally reads as networks, relationships, and systems working together. That makes it a great fit for products about connection, data, or intelligence, because the background quietly reinforces what the product is about. The visual says "everything here is connected" before the copy does.

03

The dark field lets it glow

The whole network sits on a black background, which is what lets the glowing dots and lines stand out and keeps light text readable on top. The darkness gives the constellation somewhere to shine and stops the web of lines from feeling cluttered. Keep the surrounding design dark so the network stays the focus.

04 · Use With Claude / Cursor
Claude
01Click 'Customize', then go to 'Skills'
02Go to 'Create Skills' and upload the skill.md file
03Put the design.md file in your project's knowledge base
04Mention the skill name as you build — Claude applies it automatically
Cursor
01Place SKILL.md and DESIGN.md in your repo root
02Open .cursor/rules and add @SKILL.md @DESIGN.md
03Restart Cursor for the rules to apply
04Build normally — mention the skill name to invoke it automatically
★ PRO TIP

Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction — then hand those references to Claude Code. You'll get significantly higher quality output than going straight to code.

05 · Watch Out For
! WARNING
Text sitting on a busy patch of the web
The network is denser in some areas than others, so a headline can land on a tangle of lines. Keep your text in a calmer zone or add a subtle dark gradient behind it so it stays readable.
! WARNING
Too dense for the page
A thick particle web looks impressive but can get noisy fast. Use a sparser density behind content-heavy sections and save the denser look for pure splash moments.
! WARNING
Performance on mobile
It runs a live canvas animation that uses CPU, and mobile devices don't have a cursor to interact with anyway. Consider lowering the density or turning interaction off on mobile, and respect reduced-motion settings by freezing the web to a static constellation.
! WARNING
Using it behind everything
Interactive Constellations is a hero moment, not a whole-site background. Putting it behind every section tires the eye and kills the impact of the one place it actually lands.
● 07 · Download

Beautiful designs in minutes.

Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.

UNLOCK WITH PRO →