---
title: "Confetti Lines 3D"
canonical_url: "https://framerhub.io/components/confetti-lines-3d"
last_updated: "2026-06-15T14:46:29.134Z"
---

## Create Stunning 3D Celebrations

A vibrant 3D animation component featuring confetti lines with smooth dash animations, customizable colors, and interactive camera controls.

## Features

**3D Confetti Lines**
Dynamic confetti lines that move through 3D space with smooth dash animations and natural motion.

**Customizable Colors**
Define up to 5 colors for your confetti lines. Each line randomly uses one of your chosen colors.

**Dash Animations**
Smooth dash offset animations create flowing, continuous movement along each confetti line.

**Mouse Interaction**
Optional camera orbit control based on mouse movement for an interactive experience.

## Use Cases

**Celebration Pages** — Perfect for success pages, milestone achievements, and special announcements

**Product Launches** — Add excitement to product launch pages and marketing campaigns

**Event Websites** — Ideal for party invitations, conference sites, and celebration events

**Hero Sections** — Create attention-grabbing hero sections with dynamic 3D effects

![Confetti Lines 3D Preview](/framerhub/img/components/control/confetti-lines-3d.jpg)

## How to Use

### Installation

**VIDEO PLACEHOLDER: Installation Tutorial**

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find Confetti Lines 3D in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

Use the property controls to customize your 3D confetti effect.

**Colors**

- Colors — Enter comma-separated hex colors for confetti lines (e.g., "#4062BB, #52489C, #59C3C3")

**Background**

- Background Color — Set a background color for the entire canvas

**Animation**

- Count — Number of confetti lines (10-200)
- Speed — Animation speed multiplier (0.1-5)
- Line Width — Thickness of the confetti lines (0.01-0.5)
- Dash Length — Percentage of line visible (0.1-0.9)

### Quick Tips

**Best Performance** — Use 30-60 lines for smooth animation on most devices. Reduce to 20-30 on mobile for optimal performance.

**Color Combinations** — Use bright, contrasting colors for festive, energetic feels. Try pastel colors for elegant, sophisticated celebrations.

**Dash Length** — Shorter dash lengths (0.2-0.3) create dotted, staccato effects. Longer dashes (0.6-0.8) feel more continuous and flowing.

**Speed Settings** — Default speed (1.0) works for most cases. Slower speeds (0.5-0.8) feel more elegant, faster speeds (2-3) add energy.

## Credits

Built upon [Animated Mesh Lines](https://github.com/Jeremboo/animated-mesh-lines) by [Jeremboo](https://jeremieboulay.fr/portfolio/) for [Codrops](https://tympanus.net/codrops/).

## Why Designers Love This

Bring celebrations to life with stunning 3D confetti lines. Built with Three.js for smooth 60fps performance, this component adds professional-grade visual effects to your Framer projects.

---

**Need Help?** Visit framerhub.io/support for documentation and video tutorials.