# Glass Code Block

Premium frosted-glass code window with rim light and traffic-light controls.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## Installation

<TabsTrigger value="cli">Command</TabsTrigger>
<TabsTrigger value="manual">Manual</TabsTrigger>

```bash
npx shadcn@latest add @framecn/glass-code-block
```

<Step>Copy and paste the following code into your project.</Step>

<Step>Update the import paths to match your project setup.</Step>

## Usage

```tsx
import { GlassCodeBlock } from "@/components/framecn/glass-code-block";
```

```tsx
<GlassCodeBlock />
```

## API Reference

### GlassCodeBlock

| Prop                | Type      | Default                   |
| ------------------- | --------- | ------------------------- |
| `code`              | `string`  | `DEFAULT_CODE`            |
| `title`             | `string`  | `"hero.tsx"`              |
| `width`             | `number`  | `760`                     |
| `height`            | `number`  | `460`                     |
| `fontSize`          | `number`  | `16`                      |
| `background`        | `string`  | `"#0a0a0a"`               |
| `glassColor`        | `string`  | `"rgba(10, 10, 10, 0.6)"` |
| `staggerFrames`     | `number`  | `4`                       |
| `showTrafficLights` | `boolean` | `true`                    |
| `speed`             | `number`  | `1`                       |
| `fps`               | `number`  | `30`                      |
| `durationInFrames`  | `number`  | `180`                     |
| `className`         | `string`  | `-`                       |

## Notes

  A frosted-glass code window with rim lighting and macOS-style traffic light
  controls. Great for premium landing pages.