3D Layer Experiments
Six patterns for faking 3D depth in pure CSS. Hover the cards, tilt your mouse, scroll through.
Parallax Card Stack
Four identical cards offset by scale + translate. Hover the stage — front card lifts, others adjust.
Multi-Layer Tilt Card
Card tilts toward cursor. Inner layers sit at different Z-depths so they parallax.
Layers with Depth
Title sits at translateZ(50px), badge at 30px, body at 20px. Move your mouse to see them decouple.
Layered Cubes (preserve-3d)
Four layers stacked along Z, parent wrapper rotated on X and Z — reads as an isometric tower.
Parallax Heading
Same word rendered at three sizes and opacities, stacked with subtle offsets — creates a holographic read.
Stacked Text Shadow
Eight layered `text-shadow`s simulate a 3D extrusion. No SVG, no images — just CSS.
Rotating Depth Badge
Concentric rings, inner radial gradient, and a gentle rotateX/rotateY animation give a floating-in-3D feel.
Peel-Apart Card
Hover the card — layers separate in 3D space, revealing the stack underneath.
Cursor-Attracted Buttons
Buttons physically pull toward your cursor when it gets close. Feels alive.
Book-Flip Card
Hover to rotate 180° on Y-axis — front and back are different designs.
3D Backgrounds in CSS
Full-bleed background patterns you can drop behind any hero or section.
Beyond Static Mockups
Variable-driven theming, Spline-style 3D scenes, and token-based design systems — all in pure CSS + JS.
Multi-Mode Theme Demo
One component, four themes. CSS variables swap colors, density, and brand tokens instantly — the Figma Variables pattern applied to production CSS.
"One component, one tokenized CSS — all four themes flip via data-attributes."
Interactive 3D Scene
Move your mouse — the whole scene parallaxes in 3D. Three objects at different Z-depths rotate toward the cursor. Pure CSS, preserve-3d, no Three.js.
Progressive Card Reveal
IntersectionObserver animates cards into place as they enter the viewport — staggered, smooth, battery-friendly.
Auto-Layout Analog
One base .slot-card class, five variants via data-variant — the Figma auto-layout + slot-properties pattern in CSS.
Cursor-Masked Reveal
Move your cursor over the panel — it reveals the hidden layer underneath through a circular mask. Great for before/after shots or hidden-detail hover states.
Component Property Switcher
Same component — 4 size × 3 intent × 2 state properties. This is the Figma component-set pattern: one source, many variants switched by properties.
Layer-Matched Transition
Click the card — same DOM elements transition between two states by position/size/color. This is Figma's Smart Animate behavior in CSS.
AI Integration Pipeline
Click to expand. Notice how the media, title, and tag smoothly reshape between states — same elements, different layout.
Multi-Screen Flow
Navigate through screens like a Figma prototype. Each click transitions with a smooth slide — mimics the "On Tap → Navigate" interaction.
AIM Tech AI
Future-ready custom software & AI systems. Let's build.
What we build
- AI integration
- Custom software
- Cloud infrastructure
Book a strategy call
30-minute consultation. We'll map your AI roadmap.
Constraints & Resizing
Drag the handle to resize. Children reflow like Figma's auto-layout: fixed widths stay fixed, fill widths grow, hug-content shrinks to fit.
Material Ripple Effect
Click anywhere inside the panel — a circular wave emanates from the click point. Classic Material/Android pattern in CSS.
Typography That Enters
Each letter fades up + blurs in with a 30ms stagger. Replay by clicking the button.
Future by Design.
Tile Lift on Hover
Grid rendered in isometric perspective; each tile rises on hover with a teal glow underneath.
Autotyping Headline
JS cycles through phrases, typing each character with a blinking cursor. Deletes and types the next on loop.
Hamburger ↔ Close
Click the icon — three lines smoothly transform into an X and back. Pure CSS transforms; no SVG morphing needed.
Sparkle Trail
Move your cursor across the panel — a trail of fading teal dots follows. Delightful micro-interaction.
Iridescent Hover Card
Rainbow conic gradient that follows the cursor. Mimics a holographic foil sticker — unique per angle.
AIM Tech AI
Concentric Pulse on Hover
Hover an icon — rings emanate outward like a notification badge or a sonar ping.
Fanned Note Stack
Hover the stack — notes fan out like held playing cards.
Mouse-Attracted Particles
Canvas particles drift with damped physics; your cursor attracts them. Pure JS, no libraries.
Layered Wave Animation
Three SVG wave layers with different speeds and opacities create a calming water surface.
Vertical Scanning Rays
Vertical conic-gradient beams sweep horizontally — feels like stage lighting.
Apple-Style Bento Layout
Asymmetric grid with varied cell sizes. Each cell has a distinct accent and hover state.
AI Integration
Autonomous systems, not bolt-on chatbots.
Years in production
Custom Software
Cloud-Native
UI / UX
Beverly Hills, CA
Live Stats Donut
SVG donut chart with click-to-segment interaction. Center label updates with the selected slice.
Multi-Step Progress
Click the dots to advance through the stepper. The connecting line fills smoothly.
Copy Feedback
Click the card to copy the value to clipboard. Success state animates briefly before reverting.