# Pipoca

A pile of matte balls and cubes that huddle in the center and part when the mouse passes through.

> Pipoca is an exclusive THM Componentes component that builds, in Three.js, a cluster of spheres and rounded cubes held to the center by custom physics. The cursor opens a path through the pieces, a click scatters them and attraction pulls them back. With studio lighting and soft shadows, it fits tech heroes and services sections.

- Category: 3D and space
- Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code
- Load weight: Heavy: WebGL or simulation; one per page, loaded on demand
- Technology: Vue 3, TypeScript, WebGL, Three.js
- Interaction: Mouse, Touch
- URL: https://vibecode.thmtecnologia.com/en/components/pipoca/

## What it looks like

It looks like a handful of matte rubber balls and rounded cubes under studio light. On load, the pieces fall in from every side and pack into a ball that turns slowly, like a lazy whirlpool. Most are white or light gray, about 30% are indigo and cyan and a few are navy. When the mouse passes, an invisible finger pushes a hole through the cluster, and the pieces settle by rolling over each other. A click scatters everything and attraction gathers it again. Soft shadows fall between the pieces and on the floor, over an off-white background.

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

- “a bunch of 3D balls that move away when I hover”
- “a cluster of spheres and cubes that scatters when I click”
- “something playful but classy for the top of a tech site”
- “colorful balls with physics that react to the cursor, like a toy”
- “a 3D hero with matte pieces and soft shadows, studio style”
- “balls pushing each other around for my services page”
- “a 3D ball pit that moves with the cursor”

## Also known as

3D cluster, physics cluster, instanced mesh, spheres with physics, 3D ball pit, interactive 3D shapes

## When to use

- A digital product or tech brand hero with a playful tone
- A services or features section that needs a visual break
- A presentation opener or launch page with little text
- A design or motion studio portfolio

## When to avoid

- Old phones: collision physics and shadows are demanding
- Serious pages, such as healthcare or legal, where a toy-like tone clashes
- Screens that already run another heavy WebGL effect

## How to ask your AI

```text
Create a Three.js 3D cluster of spheres and rounded cubes in the hero with attraction and collision physics: the cursor opens a path and a click scatters the pieces. Use my brand colors for the accents, drop shadows on slow devices and show a still frame for reduced motion.
```

With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising.

## Questions about Pipoca

### Is Pipoca heavy on phones?

It is rated Heavy in THM Componentes, but it adapts: Pipoca lowers resolution and turns off shadows when frames drop, caps pixel density at 2x and pauses off screen or when the tab is hidden. On weak devices, lowering the count prop, which accepts 8 to 400 pieces, eases the physics.

### Can I use my brand colors in Pipoca?

Yes. Pipoca has props for the light base color, two accent colors and the background, plus the share of colored pieces and the material roughness. The THM Componentes prompt tells your AI to replace those values with your project color tokens.

### How does Pipoca handle reduced motion?

When the system asks for less motion, Pipoca solves the packing in one go and shows the cluster at rest, already settled. The cursor and clicks no longer move the pieces, so the scene becomes a still 3D image with the same lighting and shadows.

## Related components

- [Tombo](https://vibecode.thmtecnologia.com/en/components/tombo/): Pill-shaped tags with service names drop onto the screen, bump into each other and pile up; drag and throw them.
- [Quimera](https://vibecode.thmtecnologia.com/en/components/quimera/): A glossy liquid 3D shape that ripples, merges with a ring and two capsules and turns with your mouse.
- [Batuta](https://vibecode.thmtecnologia.com/en/components/batuta/): Thousands of tiny dots that fly apart and regroup as a sphere, a ring, a cube and a word you choose.
- [Entardecer](https://vibecode.thmtecnologia.com/en/components/entardecer/): Hundreds of 3D bubbles drift slowly up and down over a sky that shifts from blue to orange.
- [Orvalho](https://vibecode.thmtecnologia.com/en/components/orvalho/): Glossy indigo drops that join and split like liquid, with one of them following 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).