Digital Rose

Project Overview

Digital Rose is a bouquet that actually blooms. The flowers aren't illustrations: each one was lifted from footage of a real flower opening, isolated from its background, flattened to poster colors, and vectorized into eighteen SVG stages from bud to full bloom. In the browser those stages cross-fade on a requestAnimationFrame timeline, so each flower reads as one continuous unfurl, cycling through bloom, hold, close, and rest on its own schedule. Opacity and scale are written straight to the DOM every frame instead of re-rendering React, which keeps a full bouquet smooth even on mobile. Visitors arrange the bouquet themselves, choosing the number of flowers, the variety and color of each stem, the greenery, and a cinematic bokeh-and-glow layer, then send it as a shareable e-card.

Technologies Used

Key Features

• Flowers traced from real bloom footage: an ffmpeg, rembg, and vtracer pipeline turns video into 18 SVG growth stages per variety
• Roses, lilies, tulips, carnations, poms, and alstroemeria, each tintable to a palette of colors
• Cross-faded bloom animation driven by requestAnimationFrame with direct DOM writes, so there are no per-frame React renders
• Interactive bouquet builder: flower count, per-stem variety and color, greenery, size, and an outward turn for edge blooms
• Optional cinematic FX layer with bokeh and glow
• Shareable e-cards, plus a shop with Stripe checkout and a fulfillment dashboard for real-flower orders