UI Components & Resources

# Initialize shadcn/ui
npx shadcn-ui@latest init

# Add components
npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add dialog

# Install Framer Motion
pnpm add framer-motion

// Animated component example
import { motion } from 'framer-motion'
import { Button } from '@/components/ui/button'

export function AnimatedCard() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
      className="p-6"
    >
      <h2>Animated Card</h2>
      <Button>Click me</Button>
    </motion.div>
  )
}

import Spline from '@splinetool/react-spline'

export function Hero3D() {
  return (
    <div className="h-screen">
      <Spline scene="https://prod.spline.design/YOUR_SCENE_ID/scene.splinecode" />
    </div>
  )
}

# Install Rive
pnpm add @rive-app/react-canvas

import { useRive } from '@rive-app/react-canvas'

export function RiveAnimation() {
  const { RiveComponent } = useRive({
    src: 'animation.riv',
    stateMachines: 'State Machine 1',
    autoplay: true,
  })

  return <RiveComponent />
}