Confetti Lines 3D FREE

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

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 by Jeremboo for 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.