Skip to content

component

Layer Stack

By Marco Ponce de León

Details

Summary

Interactive Composition

Description

Service Stack turns a plain list of services into a living, isometric stack that assembles itself the moment it scrolls into view. Each layer is an angled glass card; hover any layer and it lights up in its own color with a connector line and label. A soft ambient glow and a gentle idle float keep the whole stack feeling alive. Built for the "What we do" moment on a site. Drop it into a services, features, or process section, type in your items, and it does the rest. No images or assets to manage. Features Scroll-triggered assembly. Layers fan out from a single stack when the section enters the viewport (powered by an intersection observer). Isometric glass layers. Angled, rounded cards with a translucent finish that sit beautifully on dark or image backgrounds. Color-on-hover. Each layer fades to its own accent color with a connector line, dot, and label. Ambient glow. Adjustable radial glow behind the stack for depth. Idle float. Subtle, staggered floating so the stack never feels static. Fully data-driven. Add, remove, and reorder items, each with its own title and color. Built-in labels. Optional service labels with their own color and size, so the component works on its own. Tunable motion. Control open direction (bottom, center, top), duration, stagger, tilt, spacing, and size.

Introduction

Interactive Composition

Rank history

Daily rank per list, from the first snapshot — lower is better.

12515017519878/148/228/309/79/15
  • All · #933