-
After scrolling
-
Landing page
-
After scrolling
Inspiration
I love flowers, so much so that I sometimes forget about my pollen allergy. Especially wildflowers that I come across in the fields, a roadside or a mountain, anywhere like literally anywhere. I feel so calm when I'm surrounded with greenery and flowers. So that inspired me to make this.
What it does
It's an immersive website where you can scroll around and get lost in the flower field.
How I built it
I built the whole thing in Three.js, with no outside 3D models — everything you see (grass, flowers, butterflies, particles) is made with code. The grass sways in the wind using a small shader, and scrolling controls the story: you enter into a field of flowers following butterflies and end up scrolling there.
Challenges I ran into
I had never touched Three.js before, so most of the build was trial and error. At one point the butterfly was so close to the camera it filled the whole screen like a giant wall. Later, scrolling seemed to just stop working — turned out a small CSS rule was quietly breaking it behind the scenes, not the 3D code at all. I also gave up hunting for flower and grass models online and just built my own instead, which ended up being faster.
Accomplishments that I am proud of
Making an entire 3D field — grass, flowers, lighting, floating light particles, animated butterflies, and a full 360° camera view — from nothing, in a weekend, with zero prior 3D experience.
What I learned
That building things myself is sometimes quicker than searching for the "perfect" asset. Also that bugs that look like code problems aren't always code problems — sometimes it's just one small CSS setting.
What's next for Wildflower Field
-Adding sound like wind and birds -Having the light shift from day to dusk as I scroll deeper in -Making the butterfly react to my cursor so it feels more alive.
Log in or sign up for Devpost to join the conversation.