<!-- source-hash: 5b4e3ad25ef1abb4f28d722afea48eb0 -->
Renders a responsive, lazily-loaded grid of short video bites grouped by aspect ratio (portrait, square, landscape), using viewport-gating to defer off-screen player mounts and prevent cumulative layout shift (CLS).

## Key Components

| Export | Type | Description |
|--------|------|-------------|
| `VideoBitesDisplay` | Component | Primary public component; filters, sorts, and groups bites by aspect ratio |
| `VideoBiteCard` | Component | Individual bite card wrapping `<Video>` inside a styled `<Card>` |
| `LazyBite` | Component (internal) | Defers child mount until within 500px of the viewport via `useNearViewport` |
| `BiteGrid` | Component (internal) | Renders ratio-appropriate column grid with each bite wrapped in `LazyBite` |

## Key Behaviors

- **Filtering & sorting**: Optionally filters to published bites only, sorted newest-first by `created_at`
- **Aspect ratio grouping**: When multiple ratios exist, renders `<RatioTabs>`; otherwise falls back to a flat `<BiteGrid>`
- **CLS prevention**: `LazyBite` uses a CSS `aspect-ratio` placeholder matching the bite's ratio before the player mounts; `layout="fill"` on `<Video>` fills the card from first paint
- **Player routing**: All bites go through the `<Video>` primitive (no raw `VideoPlayer` carve-out) since MuxPlayer loads its HLS engine lazily

## Usage Example

```typescript
import { VideoBitesDisplay } from './video-bites-display';
import type { VideoTeaser } from '../../types/video-processing';

const bites: VideoTeaser[] = [
  {
    url: 'https://stream.example.com/clip1.mp4',
    title: 'Product Demo',
    thumbnail_url: 'https://cdn.example.com/thumb1.jpg',
    published: true,
    created_at: '2024-06-01T12:00:00Z',
  },
];

export function HighlightsSection() {
  return (
    <VideoBitesDisplay
      bites={bites}
      title="Product Highlights"
      filterPublished={true}
      showTitle={true}
    />
  );
}
```