Install this CLAUDE.md template.
Name: Framer Site Project Template
Save to: ./CLAUDE.md in the current project

---
# CLAUDE.md — Framer Site Project

## Project overview
<!-- One-sentence description: e.g., "Marketing site for SaaS product with CMS-driven blog" -->

## Tech stack
- **Platform**: Framer (visual site builder)
- **Custom code**: React + TypeScript (Framer's code component system)
- **CMS**: Framer CMS (built-in collections)
- **Hosting**: Framer (automatic)

## Custom code components

Framer supports React code components written in TypeScript:

```tsx
import { addPropertyControls, ControlType } from "framer"

export default function CustomButton(props: {
  label: string
  variant: "primary" | "secondary"
  onClick?: () => void
}) {
  const { label, variant, onClick } = props

  return (
    <button
      onClick={onClick}
      style={{
        background: variant === "primary" ? "#000" : "transparent",
        color: variant === "primary" ? "#fff" : "#000",
        border: "1px solid #000",
        padding: "12px 24px",
        borderRadius: "8px",
        cursor: "pointer",
        fontSize: "16px",
      }}
    >
      {label}
    </button>
  )
}

addPropertyControls(CustomButton, {
  label: { type: ControlType.String, defaultValue: "Click me" },
  variant: {
    type: ControlType.Enum,
    options: ["primary", "secondary"],
    defaultValue: "primary",
  },
})
```

## Coding conventions
- Code components use `addPropertyControls` for the visual editor
- Use inline styles or CSS modules (no Tailwind in Framer code components)
- Framer provides `useMotionValue`, `useTransform`, `useScroll` from Framer Motion built-in
- Overrides are functions that modify existing canvas elements' props
- Code components live in the project's code panel, not external files

## CMS collections
- Define collections in the CMS panel with typed fields
- Bind collection fields to component props in the canvas
- Dynamic pages use `/blog/:slug` routing pattern
- CMS items can be imported via CSV

## Override pattern
```tsx
import type { ComponentType } from "react"
import { useEffect, useState } from "react"

export function withScrollProgress(Component: ComponentType) {
  return (props: any) => {
    const [progress, setProgress] = useState(0)
    useEffect(() => {
      const handler = () => setProgress(window.scrollY / document.body.scrollHeight)
      window.addEventListener("scroll", handler)
      return () => window.removeEventListener("scroll", handler)
    }, [])
    return <Component {...props} style={{ ...props.style, opacity: 1 - progress }} />
  }
}
```

## Common pitfalls
- Code components don't support `import` from node_modules: bundle dependencies inline or use CDN
- Framer's preview and published site can behave differently: always test published
- CMS collection pages need a "CMS page" wrapper, not a regular page
- Custom fonts must be uploaded in project settings, not imported via CSS