LIGHT. MATH. YOUR NEXT BUILD.

Interactive backgrounds for product websites

A mouse-reactive background can make a product introduction feel responsive before someone tries the product itself. Kinetic uses a dot grid, giving the hero a different visual language from a soft gradient or reflective surface. This starter keeps the product story in normal HTML above that decorative layer.

The sample copy and feature cards are placeholders, not claims about a real product. The embedded preview is recorded video. Add a member-downloaded Kinetic kit to try genuine mouse interaction in your own local project.

Install the product hero

npx shadcn@latest add https://striktly.com/r/kinetic-product.json

import { KineticProduct } from "@/components/striktly/kinetic-product";

export default function ProductIntroduction() {
  return <KineticProduct />;
}

The component renders its preview immediately. Use the registry guide to pass a stable kit loader and your exported configuration. Download the full product-page starter for a framework-free project, or open its full preview.

Make interaction support the message

• Use the background to support the product's tone. Keep the main action clear and predictable.
• Leave text, links and controls in the DOM rather than drawing them into WebGL.
• Let pointer movement affect the background while buttons keep ordinary click behavior. The starter skips decorative click effects when an interactive control is targeted.
• Treat touch as its own input mode. Do not require hover to reveal essential information or navigate the page.

Keep the feature section stable

The starter places three sample feature cards below the animated introduction. On small screens they become a single column. Replace the sample text with specific product details and connect the call to action to your real onboarding flow. The starter does not add signup, membership or billing logic.

Configure and measure

Open Kinetic to choose colors and motion, then download its kit. The Kinetic reference documents published controls. Use your kit's config rather than expecting the recorded preview to react to settings changes.

The shared surface respects reduced motion, manual pause, offscreen visibility and hidden tabs, and destroys the renderer on teardown. Start with its 700000-pixel and 30 FPS caps, then measure on target hardware. See performance and accessibility for the checks to make before shipping your product page.