Pro
Three.js
Grassy Background
Backgrounds
Overview
Flower Field brings a stylised garden to life through delicate flowers, slender stems, and glowing buds. Translucent white petals, lavender at the base and edged with an iridescent magenta-to-orange rim, unfold against a deep navy background, creating a striking contrast between luminous blossoms and surrounding darkness.
The flowers unfurl one after another on a stagger, building a layered arrangement of blooms at different heights, while buds in orange, gold, magenta, and pink glow between the stems and a soft mist drifts along the ground. Move the pointer through the meadow and the flowers sway away from it like a gust of air, and closed buds open as it passes, giving the composition a dreamy, almost magical atmosphere.
Designed for creative portfolios, lifestyle brands, and expressive digital experiences, Flower Field combines botanical beauty with animated visual storytelling. Its colourful composition and generous negative space make it particularly suitable for immersive hero sections.
Usage Code
page
import FlowerField from '@/components/effects/flower-field' const page = () => { return ( <div className="h-screen w-full"> <FlowerField /> </div> )} export default pageExample Production Use Case
Consider a boutique fragrance brand launching a floral-inspired collection. The homepage opens with an elegant headline against a deep navy background, while glowing buds light the lower portion of the screen.
Delicate flowers unfurl among the glowing buds, revealing neon-rimmed petals and layered blossoms. The evolving garden creates a sense of discovery while supporting the collection's botanical identity.
The result is a distinctive landing page that communicates elegance, creativity, and nature-inspired beauty without relying on conventional floral photography.
Best Used For
- Beauty, fragrance, and skincare websites.
- Floral boutiques and botanical brands.
- Creative portfolios and artistic landing pages.
- Fashion and lifestyle campaigns.
- Immersive hero sections with dreamlike aesthetics.
- Digital art showcases and interactive storytelling.
- Seasonal campaigns and nature-inspired experiences.
Not For
Flower Field is less suitable for dense dashboards, technical documentation, and administrative interfaces where decorative motion provides little functional value. Its colourful blossoms and glowing lights can compete with text placed directly over the garden.
Avoid using the animation behind long paragraphs or complex forms. The effect works best in spacious compositions where the flowers can remain a visual feature without interrupting content.
Performance Budget
Keep flower rendering and bloom animations efficient, particularly as more blossoms appear across the scene. Reuse visual resources where possible and limit unnecessary updates to preserve smooth motion.
The scene caps the pixel ratio at 1.5 and stops rendering while it is offscreen or the tab is hidden. On mobile and lower-powered devices, lower density, glow, or depthOfField when necessary. With reduced motion, it renders the meadow in full bloom as a single still frame.
Accessibility and Mobile
Maintain sufficient contrast between foreground text and the colourful flowers. Keep headings, navigation, and interactive controls separate from decorative animation so the garden does not interfere with accessibility.
On mobile, adjust flower distribution and scale to preserve the composition without crowding smaller screens. With prefers-reduced-motion, the meadow shows already in bloom as one still frame, and the pointer no longer moves the flowers.
Common Mistakes
- Excessive flower density that makes the scene appear crowded.
- Overpowering glow that obscures delicate petal details.
- Uniform flower sizes that reduce visual depth.
- Abrupt bloom transitions that disrupt the natural appearance.
- Placing important text directly over bright floral clusters.
- Poor mobile framing that cuts off prominent blossoms.
- Unnecessary animation updates when the effect is offscreen.
- Missing reduced-motion support or a static fallback.
Changelog
Initial release
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
follow | number | 1 | How strongly the pointer blows the flowers away from it, like a gust of air. 0 leaves them be. |
followRadius | number | 1.3 | Reach of the pointer, in world units. |
bloomOnHover | boolean | true | Open buds as the pointer passes over them. |
speed | number | 1 | How quickly the flowers open, and how springy their stems are. |
breeze | number | 1 | How much the breeze sways the flowers. 0 holds them still. |
density | number | 1 | How many flowers and buds grow across the frame. 1 is the reference meadow. |
glow | number | 1 | Strength of the glow around the flowers. |
depthOfField | number | 1 | How blurred the flowers in front of and behind the focus are. 0 keeps everything sharp. |
mist | number | 1 | Strength of the mist along the ground. |
grain | number | 0.05 | Film grain strength. 0 turns it off. |
