Digital Grass

Sept 2024 • Experiment

I think of this portfolio as a garden — one that keeps evolving with me. In 2024, when I had little to show publicly, I replaced the usual "coming soon" with a patch of interactive grass.

Blades sway in a simulated breeze. Hover the long grass to find a few hidden thoughts — my way of making the wait less boring and a little more personal.

Role
Designer & Developer
Focus
Creative Coding, Interaction Design
Team
Me, myself, and I
Timeline
September 2024

Starting point

The portfolio was still in progress and I had no work to show publicly. A blank page felt wrong — but so did a static “coming soon.”

I wanted something alive at the bottom of the screen. Something you could play with while the rest of the site grew in.

Live demo

hi, i'm arko!
i'm currently pruning my digital garden :)

Run your pointer through the grass. Hover the long blades for hidden thoughts.

How it works

A thousand thin divs, each a blade of grass. Random height, width, colour, and z-index. On every frame, each blade gets a base sway from a sine wave — plus a mouse repulsion force when the pointer is nearby. The result reads as breeze and touch at once.

The grass strip sits below a short message panel — the original placeholder copy from when this lived on my old portfolio.

Hidden thoughts

The tooltip text changes by horizontal zone: three sections across the width, three lines about pruning imposter syndrome, composting ideas, and weeding portfolio insecurities. Hover to find them — a small joke about mental state while the garden was still empty.

Built with help from Claude for the initial animation loop.

Digital Grass placeholder with swaying green blades along the bottom
The original coming-soon screen on my old portfolio.

What I took away

A placeholder can be part of the story, not just dead air. The grass did real work — it made an empty portfolio feel intentional.