Petal & Stem — A Scroll Animation Experiment Built with AI-Assisted Development
Live Demo: https://petal-stem-one.vercel.app/
Introduction
I recently built Petal & Stem, a visual, scroll-driven website created as an experimental frontend project.
The goal was not to build a traditional flower shop website, but to explore how scroll animation, visual storytelling, immersive UI, and AI-assisted development can come together to create a more engaging web experience.
The project was designed around a simple idea: instead of presenting information as static sections, the website should gradually reveal the story of flowers as the user scrolls through the experience.
The Concept
Petal & Stem is inspired by the journey of a flower—from the farm and greenhouse to the final bouquet.
The visual direction combines:
- Nature-inspired colors and typography
- A handcrafted greenhouse environment
- Interactive navigation
- Scroll-based transitions
- Layered visual elements
- Smooth movement between sections
- A storytelling-focused layout
The hero section introduces the greenhouse and establishes the visual language for the rest of the experience.
Exploring Scroll-Based Animation
One of the main purposes of this project was experimenting with scroll-driven animation.
Rather than relying heavily on traditional page transitions, I wanted scrolling itself to become part of the interaction.
As the user moves through the page, visual elements can transition, move, appear, and change their position to create a more dynamic experience.
This approach helped me explore how animation can be used not simply as decoration, but as a way to guide the user’s attention and communicate a visual story.
Building It With a Free AI Coding Agent
One of the most interesting aspects of this project was the development workflow.
I built the project using a free AI coding agent as part of the development process.
Instead of treating AI as a simple code generator, I used it as an assistant throughout different stages of development—including exploring implementation ideas, generating code, refining components, troubleshooting issues, and iterating on the final experience.
The process became a combination of:
Human creativity + AI-assisted coding + continuous experimentation.
The design decisions, visual direction, testing, and final refinement still required human judgment. AI helped accelerate the implementation and experimentation process.
What I Learned
This project gave me an opportunity to explore several areas of modern frontend development:
- Scroll-based animation techniques
- Interactive UI patterns
- Visual storytelling through web design
- Animation timing and transitions
- AI-assisted development workflows
- Rapid frontend experimentation
- Balancing visual complexity with usability
One important takeaway was that animation works best when it has a purpose. A beautiful animation alone does not necessarily improve a website. The animation should support the content, guide attention, and make the interaction feel natural.
Final Result
Petal & Stem is ultimately a small experimental project, but it represents something I am increasingly interested in: using modern development tools and AI to experiment faster with creative web experiences.
It was a chance to take an idea from concept to a working interactive website while exploring how AI can fit into a real development workflow.
Explore the Project
Live Website: https://petal-stem-one.vercel.app/
This project is part of my ongoing exploration of creative frontend development, animation, and AI-assisted web development.
More experiments coming soon.