Anatomy of the Hero
A layer-by-layer deconstruction of the Tree and Skyline animations that bring the homepage to life.
The homepage of EdenIncorporated opens with two intertwined animations: a growing Tree of Knowledge and a distant New York City skyline. Together, they capture the tension at the heart of this project — the organic versus the constructed, nature versus incorporation.
What appears as a seamless visual experience is actually composed of many discrete layers, each with its own logic, timing, and personality. This interactive documentary deconstructs these animations piece by piece, allowing you to understand, replay, and experiment with each component.
Use the controls to adjust parameters, replay individual layers, or isolate them from the composition. By the end, you'll see how simple primitives — paths, particles, sine waves — combine to create something that feels alive.
Trunk & Branches
The tree begins with its trunk, growing upward from the base. Branches extend using recursive logic — each spawning smaller sub-branches at varying angles, creating the fractal-like structure we associate with trees. The randomization ensures no two renders are identical.
The Canopy
Leaves are rendered as a particle system — hundreds of small shapes scattered across the branch endpoints. Each leaf has subtle independent motion, creating the impression of a canopy breathing in the wind.
The Apple
A golden apple hangs from one of the branches — its position determined by a random branch path. The apple sways gently with the branch it's attached to, rendered with a highlight to suggest volume and a stem connecting it to the tree.
The Serpent
A serpent coils around one of the upper branches. It's rendered as a series of circles that follow a helical path, creating the illusion of a 3D form wrapping the branch. The head hangs down, swaying gently, with a tongue that flicks periodically.
The Complete Tree
All layers come together: the trunk grows upward, branches extend outward, leaves fill the canopy, the golden apple hangs in wait, and the serpent coils watchfully. The result is the Tree of Knowledge — a living symbol that sways gently in an invisible breeze.
Building Silhouettes
The skyline is constructed as a single continuous path. Each building — from generic setback towers to the iconic Empire State and Chrysler — is defined by a series of coordinate points. The path traces the Manhattan skyline in silhouette.
The Trace
Before the skyline settles into its passive state, it draws itself into existence. The tracing animation reveals the path progressively, using cubic easing to feel deliberate rather than mechanical.
Shimmer
Once traced, the outline doesn't sit static. A subtle sine-wave modulation varies the opacity of each segment over time, creating a gentle shimmer effect that suggests distant city lights reflecting off glass and steel.
Tracers
Light tracers travel along the skyline path, leaving fading trails behind them. The key technique is distance-based interpolation — calculating positions along a path of varying segment lengths to ensure smooth, consistent movement.
City Lights
The final layer brings the buildings to life. Small rectangular windows flicker on and off within each building's interior zones. Each window has its own lifecycle — fading in, flickering gently, then fading out at a natural trough before respawning elsewhere.
The Complete Skyline
The full skyline emerges: shimmer, tracers, and flickering windows combine to create a distant city at night. Each layer adds depth — the outline provides structure, tracers add movement, and windows bring life.
The Complete Animation
Tree and Skyline unite in the final composition. The Tree of Knowledge grows in the foreground while Manhattan's skyline shimmers in the distance. All parameters you've configured throughout this experience are reflected here — adjust any slider above to see its effect on the complete scene.