# Poster Viewer Demo

A fullscreen vertical poster viewer demo showcasing liveposter with swipe and arrow key navigation.

## Demos

### Standard Demo
Basic slideshow with fade transitions.
- File: `index.html`
- Config: `spec.json`

### Scanline Effects Demo
Interactive demo showcasing CRT and retro scanline overlay effects with 120fps animations.
- File: `scanline-demo.html`
- Includes 4 effect presets:
  - **No Effect**: Clean slideshow without overlays
  - **Classic CRT**: Green phosphor CRT monitor look with gentle glow
  - **VHS Glitch**: Heavy retro effect with colorful scanlines and intense flicker
  - **Subtle Blue**: Modern, gentle overlay for a refined look

## Features

- **Fullscreen viewing**: Posters fit the screen automatically (responsive to device size)
- **Multiple navigation methods**:
  - Arrow keys ↑↓ or j/k
  - Swipe up/down on touch devices
  - Mouse wheel
  - Number keys 1-5 to jump to specific poster
  - Press 'h' to toggle UI visibility
- **Progress indicator**: Shows current poster number
- **Smooth transitions**: Fade effects between posters
- **Touch-optimized**: Prevents accidental zoom, smooth swipe detection
- **CRT Effects**: Animated scanlines with flicker, noise, and glow (120fps calculations)

## Usage

### Run with demo server

```bash
npx liveposter poster-viewer/index.html
```

### Or serve directly

```bash
cd packages/demo-projects/poster-viewer
python3 -m http.server 8080
# or
npx serve
```

Then open http://localhost:8080

## Configuration

### Standard Demo Configuration
Edit `spec.json` to customize:
- Transition duration
- Easing function
- Images
- Loop behavior

### Scanline Effect Configurations

**spec-crt-classic.json** - Classic CRT Monitor:
```json
{
  "lineHeight": 2,
  "lineSpacing": 4,
  "color": "rgba(0, 255, 100, 0.12)",
  "flickerIntensity": 0.04,
  "glowEnabled": true,
  "blendMode": "screen"
}
```

**spec-vhs-glitch.json** - Heavy VHS/Glitch Effect:
```json
{
  "lineHeight": 3,
  "lineSpacing": 6,
  "color": "rgba(255, 50, 150, 0.18)",
  "alternateColor": "rgba(50, 150, 255, 0.15)",
  "flickerIntensity": 0.12,
  "animationSpeed": 2.5,
  "blendMode": "screen"
}
```

**spec-subtle-blue.json** - Subtle Modern Overlay:
```json
{
  "lineHeight": 1,
  "lineSpacing": 3,
  "color": "rgba(100, 180, 255, 0.06)",
  "flickerIntensity": 0.015,
  "glowEnabled": false,
  "blendMode": "overlay"
}
```

## Navigation

- **↑ / k**: Previous poster
- **↓ / j**: Next poster
- **1-5**: Jump to specific poster
- **Swipe up**: Next poster
- **Swipe down**: Previous poster
- **Mouse wheel**: Navigate up/down