FloatingElements

Animated floating elements such as hearts, stars, sparkles, bubbles, or petals create a whimsical background layer with configurable density, speed, size, direction, and appearance, suitable for weddings, celebrations, and romantic contexts.

Use Cases

• Wedding RSVP pages with floating hearts background
• Celebration/event pages with confetti or stars
• Romance/dating apps with subtle floating elements
• Birthday/anniversary pages with floating sparkles
• Creative portfolio hero sections with artistic floating shapes

Properties

elementType

Type of floating element to display. Type: string. Options: hearts, stars, sparkles, bubbles, petals. Default: hearts. Tip: Recommended types – weddings: hearts or petals; celebrations: stars or sparkles; creative: bubbles or stars.

color

Primary color for elements (hex, rgb, or CSS color name). Type: string. Default: #ff69b4.

secondaryColor

Optional secondary color for variation (50% of elements will use this color). Type: string.

density

Number of floating elements. Type: string. Options: low, medium, high. Default: medium. Tip: Visual impact – low: 8 elements (subtle, elegant, best for weddings); medium: 15 elements (balanced, good for most celebrations); high: 25 elements (energetic, abundant, only for high‑energy events).

speed

Animation speed. Type: string. Options: slow, medium, fast. Default: medium. Tip: Recommendations – weddings: slow (elegant, romantic); celebrations: medium (balanced energy); creative: medium or fast (dynamic).

size

Size of floating elements. Type: string. Options: small, medium, large. Default: medium. Tip: Visual impact – small: 1.5rem (subtle, delicate); medium: 2.5rem (balanced size, default); large: 4rem (prominent, eye‑catching).

direction

Float direction of elements. Type: string. Options: up, down, random. Default: up. Tip: Visual impact – up: elements float upward (rising hearts, ascending bubbles); down: elements fall downward (falling petals, rain effect); random: elements move in random directions (chaotic, playful).

zIndex

Layer positioning. Default renders at high z-index (in front). Set to 0 for non‑intrusive background effect. RECOMMENDED: Set to 0 so elements don’t block clicks. Type: number. Default: 0.

blur

Apply soft blur effect for depth perception and softer aesthetic. RECOMMENDED for weddings and romantic contexts. Type: boolean. Default: false.

Best Practices

• CRITICAL: ONLY use for emotionally appropriate domains (weddings, celebrations, creative portfolios)
• NEVER use for SaaS/business apps – it’s unprofessional and distracting
• Use low‑medium density to avoid overwhelming users (high density only for high‑energy celebrations)
• Set zIndex=0 to place behind content (non‑intrusive background layer)
• Enable blur for softer, more elegant aesthetic (especially for weddings)
• Use soft pastel colors (#ff69b4, #ffb6c1) for romantic contexts
• Respects prefers‑reduced‑motion for accessibility (animation disables automatically)
• Pair with AnimatedGradient for extra polish on wedding/celebration pages

Common Mistakes

Using FloatingElements for SaaS/business/professional apps

Why it's a problem: Floating hearts/stars are unprofessional and distracting in business contexts

Fix: ONLY use for weddings, celebrations, creative portfolios. For SaaS, use subtle hover effects or NO animations.

Using high density on wedding pages

Why it's a problem: High density (25 elements) overwhelms elegant wedding aesthetic

Fix: Use low (8 elements) for elegant weddings, medium (15) for energetic celebrations

Setting zIndex > 0 (covering content)

Why it's a problem: Floating elements block clicks and obscure text

Fix: ALWAYS use zIndex=0 to place behind content

Using bright/vibrant colors for weddings

Why it's a problem: Bright colors (#ff0000, #00ff00) clash with elegant wedding aesthetic

Fix: Use soft pastels (#ff69b4, #ffb6c1, #9dc183, #ffd700)