## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/kinetics-colorion-co/61078688-965b-4221-9177-b73292c8438b-1789374952-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/kinetics-colorion-co/61078688-965b-4221-9177-b73292c8438b-1789374925728-full.webp
- Component on Kage: https://kage.design/component/kinetics-colorion-feature-grid-3

## Before you start
Ask what surfaces, visual effects, and motion language fit the user's product and brand. Then use these principles to build a distinct visual-effects catalog rather than cloning the reference.

Create a final dark catalog section with an uppercase section heading, a small right-aligned count, and a three-column grid of equal visual cards. Showcase surface and motion primitives such as gradients, glows, border transitions, reveal effects, text motion, loaders, depth, tilt, and responsive hover treatments. Keep the card system consistent with the rest of the site: #0d0d0f page, #18181a panels, #29292c hairline borders, 8px corners, 16px padding, muted gray metadata, and off-white labels. Let each central demo occupy a predictable 70–110px stage so cards remain comparable, and use one controlled accent color—ideally derived from the user's brand—instead of making every sample bright.

Motion should be short, purposeful, and interruptible: use spring-like easing for tactile controls, opacity/transform for reveals, and respect prefers-reduced-motion by replacing movement with instant state changes. Maintain strong contrast and make hover/focus behavior discoverable. Since this section may continue below the fold, ensure the grid has a clean bottom rhythm and no clipped cards.

Never: copy the reference's card names, product name, exact demo designs, copy, logos, illustrations, or imagery.