web-artifacts-builder

Enhanced tailwind.config.js

```javascript

/* @type {import('tailwindcss').Config} /

export default {

darkMode: ["class"],

content: [

'./pages/*/.{ts,tsx}',

'./components/*/.{ts,tsx}',

'./app/*/.{ts,tsx}',

'./src/*/.{ts,tsx}',

],

theme: {

container: {

center: true,

padding: "2rem",

screens: {

"2xl": "1400px",

},

},

extend: {

colors: {

border: "hsl(var(--border))",

input: "hsl(var(--input))",

ring: "hsl(var(--ring))",

background: "hsl(var(--background))",

foreground: "hsl(var(--foreground))",

primary: {

DEFAULT: "hsl(var(--primary))",

foreground: "hsl(var(--primary-foreground))",

},

secondary: {

DEFAULT: "hsl(var(--secondary))",

foreground: "hsl(var(--secondary-foreground))",

},

destructive: {

DEFAULT: "hsl(var(--destructive))",

foreground: "hsl(var(--destructive-foreground))",

},

muted: {

DEFAULT: "hsl(var(--muted))",

foreground: "hsl(var(--muted-foreground))",

},

accent: {

DEFAULT: "hsl(var(--accent))",

foreground: "hsl(var(--accent-foreground))",

},

popover: {

DEFAULT: "hsl(var(--popover))",

foreground: "hsl(var(--popover-foreground))",

},

card: {

DEFAULT: "hsl(var(--card))",

foreground: "hsl(var(--card-foreground))",

},

},

borderRadius: {

lg: "var(--radius)",

md: "calc(var(--radius) - 2px)",

sm: "calc(var(--radius) - 4px)",

},

keyframes: {

"accordion-down": {

from: { height: 0 },

to: { height: "var(--radix-accordion-content-height)" },

},

"accordion-up": {

from: { height: "var(--radix-accordion-content-height)" },

to: { height: 0 },

},

},

animation: {

"accordion-down": "accordion-down 0.2s ease-out",

"accordion-up": "accordion-up 0.2s ease-out",

},

},

},

plugins: [require("tailwindcss-animate")],

}

```

CSS Variables (globals.css)

```css

@tailwind base;

@tailwind components;

@tailwind utilities;

@layer base {

:root {

--background: 0 0% 100%;

--foreground: 222.2 84% 4.9%;

--card: 0 0% 100%;

--card-foreground: 222.2 84% 4.9%;

--popover: 0 0% 100%;

--popover-foreground: 222.2 84% 4.9%;

--primary: 221.2 83.2% 53.3%;

--primary-foreground: 210 40% 98%;

--secondary: 210 40% 96.1%;

--secondary-foreground: 222.2 47.4% 11.2%;

--muted: 210 40% 96.1%;

--muted-foreground: 215.4 16.3% 46.9%;

--accent: 210 40% 96.1%;

--accent-foreground: 222.2 47.4% 11.2%;

--destructive: 0 84.2% 60.2%;

--destructive-foreground: 210 40% 98%;

--border: 214.3 31.8% 91.4%;

--input: 214.3 31.8% 91.4%;

--ring: 221.2 83.2% 53.3%;

--radius: 0.5rem;

}

.dark {

--background: 222.2 84% 4.9%;

--foreground: 210 40% 98%;

--card: 222.2 84% 4.9%;

--card-foreground: 210 40% 98%;

--popover: 222.2 84% 4.9%;

--popover-foreground: 210 40% 98%;

--primary: 217.2 91.2% 59.8%;

--primary-foreground: 222.2 47.4% 11.2%;

--secondary: 217.2 32.6% 17.5%;

--secondary-foreground: 210 40% 98%;

--muted: 217.2 32.6% 17.5%;

--muted-foreground: 215 20.2% 65.1%;

--accent: 217.2 32.6% 17.5%;

--accent-foreground: 210 40% 98%;

--destructive: 0 62.8% 30.6%;

--destructive-foreground: 210 40% 98%;

--border: 217.2 32.6% 17.5%;

--input: 217.2 32.6% 17.5%;

--ring: 224.3 76.3% 48%;

}

}

@layer base {

* {

@apply border-border;

}

body {

@apply bg-background text-foreground;

}

}

```

cn() - Class Name Utility

```typescript

// src/lib/utils.ts

import { type ClassValue, clsx } from "clsx"

import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {

return twMerge(clsx(inputs))

}

```

Usage: Merge Tailwind classes without conflicts

```typescript

cn("px-2 py-1", "px-3") // Result: "py-1 px-3" (px-3 overrides px-2)

```

Component Props Typing

```typescript

// Extend HTML attributes

interface CustomButtonProps extends React.ButtonHTMLAttributes {

variant?: 'primary' | 'secondary' | 'outline'

size?: 'sm' | 'md' | 'lg'

loading?: boolean

}

// Or use type

type CustomButtonProps = {

variant?: 'primary' | 'secondary' | 'outline'

size?: 'sm' | 'md' | 'lg'

loading?: boolean

} & React.ButtonHTMLAttributes

```

API Response Typing

```typescript

// Define API response types

interface User {

id: string

name: string

email: string

role: 'admin' | 'user'

}

interface ApiResponse {

data: T

message: string

status: 'success' | 'error'

}

// Usage

const fetchUser = async (id: string): Promise> => {

const response = await fetch(/api/users/${id})

return response.json()

}

```

Keyboard Navigation

```typescript

// Focus management

const handleKeyDown = (e: React.KeyboardEvent) => {

if (e.key === 'Escape') {

onClose()

}

if (e.key === 'Enter' || e.key === ' ') {

onSelect()

e.preventDefault()

}

}

// Trap focus in modal

import { useFocusTrap } from '@/lib/hooks/use-focus-trap'

function Modal({ children }: { children: React.ReactNode }) {

const modalRef = useFocusTrap()

return (

)

}

```

ARIA Labels

```typescript

// Screen reader support

aria-label="Close dialog"

aria-pressed={isPressed}

aria-expanded={isExpanded}

>

// Form accessibility

```

Code Splitting

```typescript

// Lazy load routes

import { lazy, Suspense } from 'react'

const Dashboard = lazy(() => import('./pages/Dashboard'))

const Settings = lazy(() => import('./pages/Settings'))

function App() {

return (

}>

} />

} />

)

}

```

Memoization

```typescript

import { memo, useMemo, useCallback } from 'react'

// Memo component

const ExpensiveComponent = memo(({ data }: { data: Data[] }) => {

return

})

// Memo computation

function Component({ items }: { items: Item[] }) {

const sortedItems = useMemo(

() => items.sort((a, b) => a.name.localeCompare(b.name)),

[items]

)

const handleClick = useCallback(() => {

console.log('Clicked')

}, [])

return

}

```

Installation

```bash

npm install framer-motion

```

Core Principles

High-Impact Moments Over Random Motion:

• One well-orchestrated page load with staggered reveals > dozen random micro-animations
• Focus on: page load, route transitions, major state changes
• Use CSS for simple transitions, Framer Motion for complex choreography
• Always respect prefers-reduced-motion

Page Transitions

```typescript

// app/layout.tsx or page wrapper

import { motion, AnimatePresence } from 'framer-motion'

export default function PageTransition({ children }: { children: React.ReactNode }) {

return (

initial={{ opacity: 0, y: 20 }}

animate={{ opacity: 1, y: 0 }}

exit={{ opacity: 0, y: -20 }}

transition={{

duration: 0.5,

ease: [0.22, 1, 0.36, 1] // Custom ease (easeOutExpo)

}}

>

{children}

)

}

```

Staggered List Animation

```typescript

import { motion } from 'framer-motion'

const container = {

hidden: { opacity: 0 },

show: {

opacity: 1,

transition: {

staggerChildren: 0.1 // Delay between each child animation

}

}

}

const item = {

hidden: { opacity: 0, y: 20 },

show: { opacity: 1, y: 0 }

}

export function StaggeredList({ items }: { items: string[] }) {

return (

variants={container}

initial="hidden"

animate="show"

className="space-y-2"

>

{items.map((item, i) => (

key={i}

variants={item}

className="p-4 bg-card rounded-lg"

>

{item}

))}

)

}

```

Card Hover Effects

```typescript

import { motion } from 'framer-motion'

export function AnimatedCard({ children }: { children: React.ReactNode }) {

return (

whileHover={{ scale: 1.02, y: -4 }}

whileTap={{ scale: 0.98 }}

transition={{ type: "spring", stiffness: 400, damping: 17 }}

className="rounded-xl border bg-card p-6 shadow-sm cursor-pointer"

>

{children}

)

}

```

Layout Animations (Shared Layout)

```typescript

import { motion, LayoutGroup } from 'framer-motion'

export function TabsWithAnimation({ tabs }: { tabs: Tab[] }) {

const [activeTab, setActiveTab] = useState(0)

return (

)

}

```

Scroll-Based Animations

```typescript

import { motion, useScroll, useTransform } from 'framer-motion'

import { useRef } from 'react'

export function ParallaxSection() {

const ref = useRef(null)

const { scrollYProgress } = useScroll({

target: ref,

offset: ["start end", "end start"]

})

const y = useTransform(scrollYProgress, [0, 1], [0, -100])

const opacity = useTransform(scrollYProgress, [0, 0.5, 1], [0, 1, 0])

return (

ref={ref}

style={{ y, opacity }}

className="min-h-screen flex items-center justify-center"

>

Parallax Content

)

}

```

Modal / Dialog Animations

```typescript

import { motion, AnimatePresence } from 'framer-motion'

export function AnimatedDialog({

open,

onClose,

children

}: {

open: boolean

onClose: () => void

children: React.ReactNode

}) {

return (

{open && (

<>

{/ Backdrop /}

initial={{ opacity: 0 }}

animate={{ opacity: 1 }}

exit={{ opacity: 0 }}

onClick={onClose}

className="fixed inset-0 bg-black/80 z-50"

/>

{/ Dialog content /}

initial={{ opacity: 0, scale: 0.95, y: 20 }}

animate={{ opacity: 1, scale: 1, y: 0 }}

exit={{ opacity: 0, scale: 0.95, y: 20 }}

transition={{ type: "spring", stiffness: 300, damping: 30 }}

className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50 bg-background p-6 rounded-lg shadow-lg max-w-md w-full"

>

{children}

)}

)

}

```

Gesture Animations

```typescript

import { motion, useDragControls } from 'framer-motion'

export function DraggableCard() {

const controls = useDragControls()

return (

drag

dragControls={controls}

dragConstraints={{ left: 0, right: 300, top: 0, bottom: 300 }}

dragElastic={0.1}

whileDrag={{ scale: 1.05, cursor: "grabbing" }}

className="w-32 h-32 bg-primary rounded-lg cursor-grab"

/>

)

}

// Swipe to dismiss

export function SwipeableBanner({ onDismiss }: { onDismiss: () => void }) {

return (

drag="x"

dragConstraints={{ left: 0, right: 0 }}

onDragEnd={(e, { offset, velocity }) => {

if (Math.abs(offset.x) > 100 || Math.abs(velocity.x) > 500) {

onDismiss()

}

}}

className="p-4 bg-card border rounded-lg"

>

Swipe to dismiss

)

}

```

Loading States with Animation

```typescript

import { motion } from 'framer-motion'

export function LoadingSpinner() {

return (

animate={{ rotate: 360 }}

transition={{ repeat: Infinity, duration: 1, ease: "linear" }}

className="w-8 h-8 border-4 border-primary border-t-transparent rounded-full"

/>

)

}

export function PulseLoader() {

return (

)

}

```

Respecting Reduced Motion

```typescript

import { motion, useReducedMotion } from 'framer-motion'

export function AccessibleAnimation({ children }: { children: React.ReactNode }) {

const shouldReduceMotion = useReducedMotion()

return (

initial={shouldReduceMotion ? false : { opacity: 0, y: 20 }}

animate={shouldReduceMotion ? false : { opacity: 1, y: 0 }}

transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.5 }}

>

{children}

)

}

```

Performance Best Practices

What to Animate (GPU-Accelerated):

• opacity
• transform (translate, scale, rotate)
• filter (blur, brightness)

What to Avoid Animating:

• width, height (causes layout thrashing)
• top, left, margin, padding (use transform: translate instead)
• color, background-color (expensive, use sparingly)

Optimization Tips:

```typescript

// Use will-change for smoother animations

// Lazy load motion components

import { motion, LazyMotion, domAnimation } from "framer-motion"

// Reduce animation complexity on low-end devices

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches

```

When to Use Framer Motion vs CSS

Use CSS Animations:

• Simple hover effects
• Basic transitions
• Static keyframe animations
• Better performance for simple cases

Use Framer Motion:

• Complex orchestration (staggered lists, sequences)
• Gesture-based interactions (drag, swipe)
• Layout animations (morphing between states)
• Scroll-based animations
• Dynamic animations based on state
• Need for easier control and declarative API

Use this skill when:

• Building modern React applications with TypeScript
• Implementing accessible, production-quality UI components
• Using Tailwind CSS for styling
• Integrating shadcn/ui component library
• Setting up new projects with Vite + React
• Creating reusable component libraries
• Implementing design systems with consistent patterns
• Building dashboards, admin panels, or web applications

This stack provides excellent developer experience, type safety, accessibility, and performance for modern web development.