# PixelScene

> An animated pixel-art landscape on a dot grid: sparse ink dots at rest, full colour under a round lens that follows the pointer, separate day and night palettes, and on HDR displays lit windows, stars and the sun drawn as squares brighter than SDR white. Four scenes: alpine, meadow, sea and mountains.

- Package: `fancy-ui-react` (React 18/19 + Tailwind CSS v4)
- Category: Effects
- Tags: pixel, dither, canvas, scene, lens, hdr, landscape
- Types: `PixelSceneProps`, `PixelSceneName`, `PixelSceneHdrLook`
- Docs: https://fancy-ui.rama.app/docs/components/pixel-scene
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/react/src/components/pixel-scene

## Import

```tsx
import { PixelScene } from 'fancy-ui-react';
```

Setup (once per project): `npm install fancy-ui-react`, then put these lines in your main CSS file (the stylesheet import goes right after `@import "tailwindcss";`):

```css
@import "tailwindcss";
@import "fancy-ui-react/tailwind.css";
```

and import the component styles once in the app entry: `import "fancy-ui-react/styles.css";`. Full guide: https://fancy-ui.rama.app/llms.txt

The names below are the ones to write in React; when one differs from the Svelte name, the Svelte name follows in parentheses. `class` becomes `className`, a callback takes the name the React port declares (`onclick` becomes `onClick`), snippets become `ReactNode` props (render functions when they take arguments) and the default snippet is `children`. Divergences: https://github.com/RamaHerbin/fancy-ui/tree/main/react#divergences-from-the-svelte-api

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `scene` | `"alpine" \| "meadow" \| "sea" \| "mountains"` | `"alpine"` | Which landscape to paint. |
| `night` | `boolean` | `false` | Night palette: stars, moonlit snow, lit windows. The component never changes it; toggle it from your own click or theme. |
| `cell` | `number` | `5` | Grid pitch in CSS pixels. Very large boxes use a coarser pitch so a frame stays under about 72 000 cells. |
| `dot` | `number` | `4` | Edge of each square dot in CSS pixels (at most `cell`). |
| `lens` | `boolean` | `true` | Shows the picture in full colour under a round lens that follows the pointer. |
| `lensRadius` | `number` | `21` | Lens radius in cells. Its rim is dithered on the grid. |
| `hdr` | `boolean` | `true` | On a display that reports HDR, redraws the sun, windows, stars and the lens in a WebGPU layer brighter than SDR white. Elsewhere nothing is created. |
| `hdrLook` | `"calibrated" \| "vivid"` | `"calibrated"` | HDR rendering: calibrated levels (glow 1 is the SDR dot, sRGB), or vivid, a hotter, wider-gamut look (display-p3) with lamps at the panel peak. |
| `ink` | `string` | `"currentColor"` | Colour of the resting dots outside the lens. Resolved on the host, so it follows the theme. |
| `paused` | `boolean` | `false` | Freezes clouds, birds and lights; the lens still follows the pointer. |
| `wave` | `boolean` | `true` | Plays a change of `night` as a dithered wave spreading from the sun (or moon), led by a halo that glows on HDR displays. Off under reduced motion. |
| `surfaces` | `readonly [day: string, night: string]` | `—` | Background painted by the scene for each theme; the wave carries it from one to the other. Without it the canvas is transparent. |
| `inks` | `readonly [day: string, night: string]` | `—` | Dot colour for each theme, swapped by the wave. Overrides `ink`. |
| `className` (Svelte `class`) | `string` | — | Additional classes on the host. Give it a height. |

## Node props

| Prop | Description |
| --- | --- |
| `children` | Copy rendered above the picture. Keep it in the top-left corner, which every scene leaves open. |

## Example

No React example is published for this component yet: start from the import above and the props table. The full examples are Svelte-only, on https://fancy-ui.rama.app/docs/components/pixel-scene.md.