The glowing stars card hides a night sky in plain sight: at rest it shows a faint grid of dim dots, but hovering brings a scattered constellation to life — selected stars brighten, scale up, glow, and twinkle, while the field slowly reshuffles which stars are lit so the sky always feels alive. This snippet builds it with plain HTML, CSS, and a little vanilla JavaScript.

A grid of cells, some marked as stars

JavaScript builds an 18 × 14 grid of cells, each containing a tiny 2px dot. As each cell is created, there's a 16% chance it's flagged with an .on class, designating it a star. The rest stay as the dim background dots that give the sky texture. Generating the field in code keeps the markup minimal and makes the density a single tweakable probability.

Brighten and twinkle on hover

By default even the .on stars are dim. When the card is hovered, a CSS rule turns those stars white, adds a glowing box-shadow halo, and scales them up 1.6× — so the constellation pops out of the background. Each star also carries an infinite gsTwinkle keyframe (fading between full and 35% opacity) that is paused at rest and set to running only on hover. Pausing rather than removing the animation means each star resumes its own twinkle phase instantly when you hover, with no restart flicker.

Per-star twinkle speed

Every star gets a random --tw duration between 1.4 and 3.4 seconds, used as its twinkle animation length. Because each star pulses at its own rate, the constellation shimmers asynchronously instead of blinking in unison — the key to a believable starfield. The speed lives in a CSS variable so the shared keyframe can animate every star at a different tempo.

A drifting sky

To keep the card alive even while you hold a hover, a setInterval every 900ms toggles the .on state of one random cell, occasionally promoting a background dot to a star or retiring one, and assigns a fresh twinkle speed when it lights up. Over time this makes the constellation slowly rearrange itself, so the sky is never static and two views of the card are never identical.

Readable content over the sky

The heading and description sit in a .gs-body layer above the stars, with a bottom-up gradient scrim so the text stays legible against the brightest part of the field. The glyph badge and copy are unaffected by the star animation, keeping the card usable as a real feature or product tile.

Customizing it

Change COLS/ROWS for a finer or coarser sky, adjust the 16% probability for more or fewer stars, tune the twinkle duration range, change the hover glow color, or slow the 900ms reshuffle interval. Make the stars colored instead of white for a nebula feel. Pair it with a meteor card or a sparkles text headline for a cosmic section.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Instead of guessing why the sky never repeats itself, paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly why toggling animation-play-state between paused and running (rather than adding and removing the animation) is what lets each star resume twinkling in its own phase without a restart flicker, and how the per-star --tw custom property makes 18 by 14 grid cells shimmer asynchronously instead of in unison. It's also a good candidate for optimization questions, like whether the 900ms setInterval reshuffle should pause when the card scrolls out of view to save cycles on a long dashboard page. For extending it, ask it to make the reshuffle rate react to hover duration, add a shooting-star animation across the grid occasionally, or theme the stars into a colored nebula. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build a card with a hidden constellation that brightens on hover, in plain HTML, CSS, and JavaScript, using a JS-generated CSS grid of star cells and pure-CSS twinkle animation — no canvas, no images, no libraries.

Requirements:
- On load, JavaScript must build a CSS grid of a fixed number of columns and rows (for example 18 by 14) by creating one small div per cell and appending it into a grid container whose gridTemplateColumns and gridTemplateRows are set to match.
- As each cell is created, give it roughly a 16 percent random chance of being flagged as a star with a distinguishing class; unflagged cells remain dim background dots at all times.
- Only flagged star cells should carry an infinite CSS twinkle keyframe animation (opacity oscillating between 1 and a lower value like 0.35); that animation must start in a paused state via animation-play-state: paused and switch to running only while the parent card is hovered, so hovering resumes each star's own animation phase instantly with no restart flicker.
- Each star must be assigned its own random twinkle duration (for example between 1.4 and 3.4 seconds) via a CSS custom property, read by the shared keyframe, so stars pulse asynchronously rather than in lockstep.
- On hover, star cells (and only star cells, not background dots) must visibly brighten: turn a bright color, gain a glowing box-shadow halo, and scale up.
- A setInterval running independently of hover state must periodically (roughly every 900ms) toggle a random cell's star flag on or off, so the constellation slowly rearranges itself over time even during a sustained hover, assigning a fresh random twinkle duration whenever a cell newly becomes a star.
- Card content (heading and description) must sit in its own layer above the star grid with a gradient scrim so it stays legible regardless of star brightness.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

1
Paste HTML, CSS, and JSA card shows a faint field of dim dots at rest.
2
Hover the cardScattered stars brighten, glow, scale up, and twinkle.
3
Hold the hoverStars pulse asynchronously at their own speeds.
4
Watch it driftThe constellation slowly reshuffles over time.
5
Change the densityAdjust the star probability and grid size.
6
Recolor the glowSwap white stars for a colored nebula look.

Real-world uses

Common Use Cases

Cosmic feature cards

Pair with a meteor card in a grid.

Premium tiers

A dreamy pricing card variant.

Launch sections

Match a sparkles text headline.

Space-themed sites

Echo a starfield background.

Aspirational CTAs

Wrap a shimmer button call to action.

CSS animation demos

A reference for paused, per-element twinkles.

Got questions?

Frequently Asked Questions

JavaScript builds an 18 by 14 grid of cells, each holding a tiny dot, and flags about 16% of them with an on class as it creates them. Those become stars; the rest stay as dim background dots. The density is a single probability, so you can make the sky sparser or denser with one number.

Each star carries an infinite twinkle keyframe that is paused at rest and set to running only on hover. Pausing keeps each star's animation phase intact, so when you hover they resume their own pulsing instantly with no restart flicker — which removing and re-adding the animation would cause.

Every star gets a random twinkle duration between 1.4 and 3.4 seconds stored in a --tw CSS variable. Because each star pulses at its own tempo, they fade in and out asynchronously rather than blinking in unison, which is what makes a starfield look real instead of mechanical.

A setInterval every 900ms toggles the on state of one random cell, occasionally promoting a background dot to a star or retiring one and giving it a fresh twinkle speed. Over time the constellation slowly rearranges, so the sky never looks static even during a sustained hover.

Render the grid from an array, precomputing which cells are stars and their twinkle speeds so renders are stable. Put the reshuffle interval in a mount effect with cleanup on unmount. The hover brighten and twinkle are pure CSS. In Tailwind, build the grid with grid utilities and drive the per-star duration via an inline --tw variable.

Loading…