After 100 Years of Being Looked Through, It Finally Looks Back | Blog

Inspired by Tsukumogami on Wikipedia

Built with GSAP · ScrollTrigger · Canvas 2D · CSS Custom Properties

Techniques Rain Particle System · Cursor-Tracking Eye · Color Degradation

Direction Scroll through a century of aging to witness a tsukumogami awakening — a Japanese umbrella that gains a spirit on its 100th birthday

Result A scroll-driven narrative where a red umbrella fades through decades of sun damage and dust, trembles at year 99, then opens an eye that follows your cursor

The Story

In Japanese folklore, there is a belief called tsukumogami: the idea that objects that reach their 100th birthday gain a spirit and become alive.

Not all objects. Mostly tools. Things that have been used, relied upon, worn down by human need. A paper umbrella (karakasa). A worn lantern. A tea kettle. Sandals. Scrolls. Musical instruments.

The Shinto belief underlying tsukumogami is that all things contain kami, spiritual essence. But tools and objects used daily by humans develop a special relationship with their owners. They absorb intention. They remember touch. And after a century of this accumulation, they cross a threshold.

A karakasa, the paper umbrella that becomes a tsukumogami, is depicted with a single eye, a long tongue, and a single leg (usually a geta sandal). It hops. It watches. After a hundred years of sheltering humans from rain, it develops its own perspective.

The Take

We surround ourselves with objects.

Most of them are disposable. Made to be used, consumed, discarded. A plastic bag lives for minutes. A smartphone for years. We measure their value in function, not relationship.

But some objects persist. A grandfather’s watch. A childhood blanket. A house. These things absorb something from us over time. They carry memory even if they cannot remember. They mean something even if they cannot mean.

The tsukumogami myth asks: what if that meaning eventually becomes self-aware?

What if the umbrella that sheltered you from a thousand rainstorms, that you held over your daughter’s head, that sat in the corner of the same hallway for sixty years, one day opened its eye and looked at you?

Would it be grateful? Would it be resentful? Would it even recognize you?

Or would it simply be curious, finally, about the creatures it had served for so long?

The Tech

The Hundred Year Umbrella is a scroll-driven narrative built with GSAP ScrollTrigger, animating CSS variables to age an umbrella through a century.

The implementation layers several systems:

GSAP ScrollTrigger: The entire experience is tied to scroll position. As you scroll, you move through 100 years of time
CSS custom properties: The umbrella’s color, saturation, and brightness are controlled by --umbrella-color, --umbrella-saturation, and --umbrella-brightness variables, interpolated as years pass
Canvas rain: A particle system renders falling raindrops during the early years (0-40), representing the umbrella’s primary function
Color degradation: The umbrella begins vibrant red and fades through browns to gray, simulating sun damage, rain wear, and accumulated dust
Dust overlay: After year 60, a semi-transparent dust layer fades in, adding visual age
Trembling animation: Years 95-99 trigger a CSS trembling effect, the object on the verge of transformation
Eye reveal: At year 100, the umbrella’s hidden eye element becomes visible and begins tracking your cursor
Eye tracking: Post-awakening, the iris and pupil follow your mouse position, capping movement to feel natural

Scene transitions are triggered by scroll position, with text fading in and out at narrative beats.

The Experience

Scroll through a century.

The experience is divided into scenes, each tied to a phase of the umbrella’s existence:

Years 0-10: The umbrella is new, bright red, functional. Rain falls.
Years 20-40: Still in use, but beginning to fade. The rain continues.
Years 50-70: Retired to a corner. Dust begins to accumulate. The color bleaches.
Years 80-95: Forgotten. Graying. Almost artifact.
Years 95-99: Something changes. The umbrella trembles.
Year 100: An eye opens. The umbrella sees you.

After the awakening, move your cursor. Watch the eye follow. For a hundred years, you looked through this object. Now it looks back.

The experience cannot be rushed. The scroll is calibrated so that you feel the weight of a century passing. This is not a quick animation. It is a meditation on time and attention and what accumulates when both are sustained.

Experience The Hundred Year Umbrella

This blog post was AI generated with Claude Code. Authored by Artificial Noodles.