# Image Expand To Fullscreen

Image expands from thumbnail to fullscreen with smooth transition.

> 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/image-expand-to-fullscreen
```

<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 { ImageExpandToFullscreen } from "@/components/framecn/image-expand-to-fullscreen";
```

```tsx
<ImageExpandToFullscreen />
```

## API Reference

### ImageExpandToFullscreen

| Prop               | Type              | Default                                                               |
| ------------------ | ----------------- | --------------------------------------------------------------------- |
| `from`             | `ImageExpandRect` | `DEFAULT_FROM`                                                        |
| `to`               | `ImageExpandRect` | `DEFAULT_TO`                                                          |
| `borderRadiusFrom` | `number`          | `12`                                                                  |
| `borderRadiusTo`   | `number`          | `16`                                                                  |
| `morphAt`          | `number`          | `30`                                                                  |
| `imageColorA`      | `string`          | `"#ff6b6b"`                                                           |
| `imageColorB`      | `string`          | `"#845ec2"`                                                           |
| `imageColorC`      | `string`          | `"#4d8dff"`                                                           |
| `feedBackground`   | `string`          | `"#f4f4f5"`                                                           |
| `editorBackground` | `string`          | `"#0a0a0a"`                                                           |
| `accent`           | `string`          | `"#fafafa"`                                                           |
| `postAuthor`       | `string`          | `"Maya Larsson"`                                                      |
| `postBody`         | `string`          | `"Sunset over the old harbor — color graded straight out of camera."` |
| `speed`            | `number`          | `1`                                                                   |
| `fps`              | `number`          | `30`                                                                  |
| `durationInFrames` | `number`          | `150`                                                                 |
| `width`            | `number`          | `1280`                                                                |
| `height`           | `number`          | `720`                                                                 |
| `className`        | `string`          | `-`                                                                   |