Foundation Primitives

Raymarched 3D shapes WebGL card: soft frosted-gel primitives (asterisk, sphere, half-domes, hourglass and orb) under a magnifying glass lens. Tilts to the pointer; shapes lift, spin and select. Use as a hero accent or design-system showcase. Raw WebGL2, React only.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Foundation Primitives to your project and fits it to your theme.

"use client"

import FoundationPrimitives from "@/components/ui/foundation-primitives"

export default function Demo() {
  return (
    // w-full matters: 21st centres demos in a flex wrapper, and a flex item left
    // at width:auto shrinks the page to its content.
    <div className="w-full">
      <div className="mx-auto max-w-5xl px-4 py-10 sm:px-8 sm:py-16">
        <FoundationPrimitives />
      </div>
    </div>
  )
}