FloatingElements

Animated floating elements such as hearts, stars, sparkles, bubbles, or petals that create a whimsical background layer. The component lets you configure density, speed, colors, layering, and optional blur to suit weddings, celebrations, romance, or creative portfolio 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: Recommendations – 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).

zIndex

Layer positioning (0 = behind content, positive = in front of content). ALWAYS use 0 for non‑intrusive background effect. 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)