Parol
A 3D parol, the Filipino Christmas lantern: capiz panels, a ring of petals, tassel tails and chasing lights.
Controls
<Parol />About
The parol is the light of a Filipino Christmas. Here it is a five-point star of pearly capiz panels, each facet tinted along the palette and given a mosaic of shell discs, faceted front and back in a thin dark frame. A warm heart glows behind it, a ring of capiz petals circles it, two tails of capiz diamonds end in tassels, and bulbs along the star and the ring chase through the palette (or twinkle). It builds from the heart outward, the frame drawing itself before the panels arrive one by one, then sways gently; under the pointer or a finger it leans closer and its lights run faster. It loads lazily onto the shared sculpture stage with a poster first. Original to VibeBox Motion; part of Lokal.
Use it when
- A Christmas sale, Simbang Gabi schedule, holiday menu or year-end greeting needs a hero.
- A Philippine brand wants seasonal art that feels local, not imported.
Skip it when
- It is not the season; swap it out after the holidays.
- The page already has a 3D centrepiece.
Install
The demo above is live today. Installing Pro items opens with VibeBox Motion Pro; join the waitlist to hear first.
Code
The source is part of VibeBox Motion Pro.
Licensed per seat; it installs with the same shadcn command once Pro opens.
See Pro and join the waitlistProps
| Prop | Type | Default | Description |
|---|---|---|---|
| lights | "chase" | "twinkle" | "chase" | Bulbs that run around the lantern, or sparkle. |
| tails | boolean | true | Hang the two tails with tassels. |
| label | string | "A glowing parol, a Filipino Christmas lantern, with chasing lights" | Accessible name for the artwork. |
| poster | ReactNode | — | Shown until the first frame and without hardware WebGL2. |
| className | string | — | Merged with cn(); give it a size or aspect ratio. |
Accessibility and motion
- Keyboard
- Not focusable; the artwork has no actions.
- Screen readers
- role="img" with a descriptive label.
- Touch
- A touch makes it lean and its lights run faster, like a hover; it never blocks scrolling.
- Reduced motion
- A composed still frame with every bulb lit; no sway or chase.
Edge cases and limits
- Under about 280 px wide the capiz detail blurs; use a still image there.
- Without hardware WebGL2 (software renderers included) the poster stays.
Related
Banderitas
FreeFiesta bunting strung across a section: pennants or cut-paper banners that sway with the breeze, the cursor and scroll.
Lokal · Canvas
Equalizer Ring
FreeA crown of light bars pulsing like a visualizer around a floating glass box; bars rise toward the pointer.
3D · three.js
Infinity Ribbon
FreeA glossy spectrum ribbon twisted into a figure-eight, with a travelling light pass; it bends toward the pointer.
3D · three.js