# Réstia

Tiny dots that float slowly across the background and drift gently toward the mouse, like dust in the air.

> Réstia is a THM Componentes background where small dots float slowly and drift gently toward the cursor or finger, each by a different amount, which creates depth. Built with 2D canvas and no WebGL, it has adjustable color and quantity and works well in heroes, login screens and contact pages.

- 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: Mouse, Touch
- URL: https://vibecode.thmtecnologia.com/en/components/restia/

## What it looks like

It looks like dust caught in a sunbeam in a dark room. By default, one hundred white dots of different sizes and transparency float very slowly in random directions and fade softly near the edges. When the cursor moves over the area, the dots slide slightly toward it, each one by a different amount, which gives a sense of depth. The canvas background is transparent, so the color behind comes from your page. The dot color is a prop; in the demo the dots are white in dark mode and black in light mode, scattered around a large headline.

## You may be looking for this if you asked for something like

- “a background with tiny dots floating slowly, like dust in the air”
- “particles that move when I move the mouse”
- “a dark login screen with little glowing dots behind it”
- “something subtle for the top of the site that adds depth”
- “a starry background where the dots follow the cursor”
- “make the contact page feel less empty without slowing it down”
- “that floating particles effect you see on startup sites”

## Also known as

floating dots background, floating particles, particle parallax, dust particles effect, canvas particles, interactive particles

## When to use

- A SaaS or startup hero on a dark background
- A login or sign-up screen that needs a bit of motion
- A contact or waitlist page with little content
- A launch section on a flat background, where the dots stand out

## When to avoid

- Photo or textured backgrounds, where the tiny dots get lost
- Pages with several animated canvases running at once

## How to ask your AI

```text
Add a canvas background of floating particles behind the hero: small dots in my brand colors that drift slightly toward the cursor, with a static version for reduced motion, fewer particles on mobile and a pause when it is off screen.
```

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 Réstia

### Does Réstia work on phones?

Yes. Réstia draws on a 2D canvas with no WebGL, and it also follows touch: when you tap or drag a finger, the dots drift slightly toward it. On weaker devices, lower the quantity prop, which defaults to 100 particles, and compare INP before and after, as the THM Componentes prompt recommends.

### Can I change the particle color and amount?

Yes. Réstia takes a hex color in the color prop, with 3 or 6 digits, and the amount in the quantity prop. The staticity and ease props control how much the dots react to the cursor and how smoothly they follow it. The THM Componentes prompt asks your AI to use your project color tokens instead of fixed colors.

### Is Réstia a problem for screen readers?

No. Réstia's container has aria-hidden, so screen readers skip the decorative layer and read only your page content. For people who prefer reduced motion, the original component keeps animating; the THM Componentes prompt asks your AI for a static version, which here can simply be the dots standing still.

## Related components

- [Chispa](https://vibecode.thmtecnologia.com/en/components/chispa/): Tiny points of light that twinkle and drift slowly upward, like glitter in the air, behind a headline or whole section.
- [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.
- [Cosmonauta](https://vibecode.thmtecnologia.com/en/components/cosmonauta/): Stars that rush out from the center of the screen toward the edges with glowing trails, like a ship speeding up.
- [Piracema](https://vibecode.thmtecnologia.com/en/components/piracema/): Hundreds of thin arrows fly together like a flock of birds and scatter when the cursor comes close.
- [Limalha](https://vibecode.thmtecnologia.com/en/components/limalha/): Hundreds of thousands of fine grains run in filaments, like ink spreading on paper, and swirl around the cursor.

---
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).