Every effect on this page is a technique we use in our client projects. Interact with each section to see it in action.
01 — Layout
Cards of different sizes create visual hierarchy and guide the eye. Hover over each card to see the cursor-tracking spotlight effect.
This layout uses CSS Grid with spanning cards. No frameworks — just a few lines of CSS create complex, magazine-style arrangements that collapse gracefully on mobile.
Every text size on this page scales smoothly between mobile and desktop. No breakpoint jumps — resize your browser to see the text flow seamlessly.
Each card tracks your cursor, creating a spotlight that follows your mouse.
One variable swap themes the entire site.
Every animation uses transform and opacity only — properties that run on the GPU compositor thread. Zero layout recalculations. Hover to see the bars react.
This grid collapses from 4 columns to 2 to 1. Resize the window to see it reflow naturally.
02 — Visual Style
These cards are frosted glass. The coloured orbs drifting behind them bleed through the blur, creating depth you can feel. Hover to lift them.
Semi-transparent backgrounds combined with backdrop blur create the illusion of real frosted glass. The coloured shapes behind this card are visible but softened.
The background shapes are simple divs with border-radius and blur filters, animated with CSS keyframes. Organic movement without a single line of JavaScript.
Traditional depth uses heavy drop-shadows. Glassmorphism achieves it through transparency and blur, creating a modern, airy feel that heavy shadows can't match.
03 — Motion
Each of these cards demonstrates a different animation type. They play live when they enter your viewport.
Elements appear smoothly from invisible to visible
Content slides from off-screen into position
Elements grow from zero to full size with spring easing
Spinning elements with custom cubic-bezier timing
Sequential delays create a wave effect across groups
CSS perspective creates convincing depth rotations
Smoothly transitioning between different border-radius values
Text appears character by character for dramatic effect
04 — Interaction
Move your cursor over these cards. They track your mouse position and tilt
in real-time using JavaScript-powered 3D transforms.
These effects require a mouse/trackpad — visit on desktop for the full experience.
The tilt uses cubic-bezier easing that mimics real-world spring behaviour. Move away and watch the card bounce back to neutral.
A radial spotlight follows your cursor across the card surface, creating the illusion of a light source you control.
The icon, title, and text each sit at different Z-depths using translateZ, creating parallax movement within the card itself.
05 — Theming
One click transforms the entire page. Every colour, shadow, and opacity adapts instantly through CSS custom properties.
Switching a single data attribute on the HTML element swaps an entire palette of 20+ CSS variables. Every colour, shadow, blur, and opacity transitions smoothly. Try it yourself:
06 — Details
Watch the borders flow. Two different techniques — one using mask-composite, the other using conic-gradient rotation. Both pure CSS.
A linear gradient animates its background-position, creating a flowing ribbon of colour around the card edge. The mask-composite trick punches out the centre, leaving only the border visible.
A conic-gradient rotates 360 degrees using the CSS @property rule to animate a custom angle variable. This creates a smooth, continuous spinning light effect around the border.
07 — Next Step
Every technique on this page is available for your next project. Let's build something your customers will remember.