# Chispa Tiny points of light that twinkle and drift slowly upward, like glitter in the air, behind a headline or whole section. > Chispa is a THM Componentes component that scatters glints across an area: tiny points of light drift slowly upward and twinkle softly, each at its own pace. Built with 2D canvas, it works as the background of a whole section or as a detail under a headline, with adjustable color, size, speed and density for launches and premium CTAs. - Category: Backgrounds and atmospheres - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Medium: canvas or continuous animation; fine for one section - Technology: Vue 3, TypeScript, Tailwind CSS v4, Canvas 2D - Interaction: None: the effect runs on its own - URL: https://vibecode.thmtecnologia.com/en/components/chispa/ ## What it looks like It looks like a starry sky seen from far away, or glitter dust floating under a light. Tiny dots of different sizes spread across the area, most of them drifting slowly upward with a slight sideways sway, and each one twinkles softly at its own pace, brightening and dimming in cycles of a few seconds. When a dot leaves through one edge, it comes back on the opposite side. By default the glints are white over a deep blue background; with a transparent background they sit over your page color. In the demo they gather just below a line of light under the headline, fading toward the sides. ## You may be looking for this if you asked for something like - “little sparkles twinkling under the headline, like glitter” - “a background with twinkling stars for the launch page” - “that effect with tiny sparks glowing under a line of light” - “make the main call to action feel premium with a few sparkles” - “glowing particles slowly rising on a dark background” - “an animated starry sky behind the product name” - “a subtle glitter effect for the top of my site” ## Also known as sparkles effect, glitter background, twinkling stars, sparkle particles, shimmering particles, starfield sparkles ## When to use - Highlighting the headline of a launch page - Giving a call to action a premium finish - A dark hero background for tech or luxury products - Announcement, countdown or special event screens ## When to avoid - Light backgrounds with light sparkles, where the effect disappears - Pages with other particle effects, which together clutter the screen ## How to ask your AI ```text Add a field of twinkling canvas sparkles under the launch headline: tiny points in my brand colors drifting up and twinkling, gathered behind a line of light, paused off screen, still for reduced motion and with density tuned for mobile. ``` With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising. ## Questions about Chispa ### Which colors can I use in Chispa? Chispa takes the glint color in particleColor and the backdrop color in background, which can be transparent to show the page behind it. Use six-digit hex values such as #FFFFFF, because the component appends the transparency to the end of the color code. The THM Componentes prompt asks your AI to swap the fixed colors for your project tokens. ### Does Chispa work on phones? Yes. Chispa uses 2D canvas with no WebGL and needs no touch input. On high-density screens, common on phones, the code applies the pixel ratio twice and only part of the glints shows up; when adapting it, ask your AI to fix that calculation and tune particleDensity. The THM Componentes prompt also asks for testing on mobile. ### Does Chispa respect reduced motion settings? Not on its own: Chispa animates all the time and only stops when the component is removed, not when it scrolls off screen. The THM Componentes prompt asks your AI for a static version for people who turn on reduced motion, and to load it on demand. An image of the dots standing still keeps the look without animation. ## Related components - [Quilate](https://vibecode.thmtecnologia.com/en/components/quilate/): Small violet and pink stars blink and spin over the word, popping in and out without stopping. - [Réstia](https://vibecode.thmtecnologia.com/en/components/restia/): Tiny dots that float slowly across the background and drift gently toward the mouse, like dust in the air. - [Firmamento](https://vibecode.thmtecnologia.com/en/components/firmamento/): A night sky with stars in three sizes drifting slowly upward and shifting gently when the mouse moves. - [Ribalta](https://vibecode.thmtecnologia.com/en/components/ribalta/): A cyan line of light switches on at the top of a dark section and spreads a glow over the headline below. - [Bólido](https://vibecode.thmtecnologia.com/en/components/bolido/): Small streaks with tails cross the card diagonally, like shooting stars, each one at its own pace. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).