# Looks Like This
URL: https://remocn.dev/docs/media/looks-like-this

A sentence ends with a small inline thumbnail that grows into a large player frame, replaced by an italic word.

- Install: `npx shadcn@latest add @remocn/looks-like-this`
- Vibe: clean
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/looks-like-this
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { LooksLikeThis } from "@/components/remocn/looks-like-this";

const LooksLikeThisScene = () => (
  <LooksLikeThis
    lead="Your next launch looks like"
    word="this"
    src="/shots/product.png"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="LooksLikeThis"
    component={LooksLikeThisScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);
```

The `lead` sentence writes in with a small thumbnail chip inline before the `end` punctuation. The chip then grows into a large framed image with player chrome while the italic `word` takes its place in the sentence. Pass your own image through `src`; the default is a `staticFile` image from the Remocn repo. The timeline scales with the composition length, and it ships light and dark through `theme`.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lead` | `string` | `"Your next launch looks like"` | Sentence that leads into the image. |
| `word` | `string` | `"this"` | Italic word that ends up beside the image. |
| `end` | `string` | `"."` | Closing punctuation after the word. |
| `src` | `string` | — | Image URL for the hero frame. Defaults to a repo-only file. |
| `aspect` | `number` | `16 / 9` | Aspect ratio of the hero frame. |
| `duration` | `string` | `"0:30"` | Clip length shown on the player chrome. |
| `accent` | `string` | — | Accent color for the italic word. Defaults depend on theme. |
| `background` | `string` | — | Solid background. Use 'transparent' to drop the ground. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme. Ships light and dark. |
| `ground` | `GshPresetId` | — | Shader preset id for the animated background. |
| `groundParams` | `Partial<GradientParams>` | — | Partial shader parameters that override the ground preset. |

## Use when
- A promise line such as what your next launch looks like, where the image is the answer.
- Revealing a hero screenshot or video still as the payoff of one sentence.
- A short intro beat that needs typography and one image working together.

## Don't use when
- The text is a question that rewrites itself into an answer beside the screenshot — use `shot-answers`.
- You want to zoom into a detail of the image first and pull back — use `up-close`.
- The image should be toured region by region — use `screenshot-tour`.