---
title: Understand the scene
description: Read the frame-driven Vue component and see how the bars, wordmark, typography and soundtrack fit together.
url: https://pellicule.thally.app/guides/edit-the-source
---

# Understand the scene

Read the frame-driven Vue component and see how the bars, wordmark, typography and soundtrack fit together.

This optional page explains the 30-second showcase on the [homepage](/). For a faster first result, use the simple [quickstart](/quickstart). Read on if you want to change the showcase yourself or give a coding assistant more precise instructions.

[Download Video.vue](/examples/Video.vue) · [Download the complete project](/examples/pellicule-first-video.zip)

## Read the film as four scenes

| Time | What appears | Where to look in the component |
| --- | --- | --- |
| 0–6 seconds | Green bars shorten and move into the `ll` position; the surrounding letters reveal the full wordmark. | `opening`, `morph`, `letters` |
| 6–13 seconds | Large typography and a pair of moving bars introduce the idea of making a scene. | `idea`, `ideaText`, `motion` |
| 13–22 seconds | Typography and a progressing frame timeline explain the relationship between frames and duration. | `frameScene`, `frameText`, `progress` |
| 22–30 seconds | The bars and letters reassemble into the wordmark with a closing line. | `closing`, `closingMorph`, `closingLetters`, `caption` |

Scene opacity overlaps briefly at the boundaries for the transitions. Those boundaries are frame numbers in the source: seconds multiplied by 30.

## One frame number drives the picture

The component starts with:

```vue
<script setup>
import { computed } from 'vue'
import { useFrame } from 'pellicule'

const frame = useFrame()
const clamp = v => Math.max(0, Math.min(1, v))
const ease = v => 1 - Math.pow(1 - clamp(v), 3)
const between = (f, a, b) => ease((f - a) / (b - a))
</script>
```

`useFrame()` returns the current frame as a reactive value. `between()` maps an animation's frame range to an eased value from 0 to 1. For the opening morph, `between(f, 40, 100)` moves the bars between their starting geometry and their final wordmark geometry.

The green rectangles stay visible as the `ll`. SVG clipping reveals `pe` on their left and `icule` on their right. Those positions match the companion `pellicule-wordmark.svg`; the film animates the existing brand construction rather than replacing it with another symbol.

## Separate picture from sound

The Vue component produces the image. `make-sound.mjs` produces a local stereo WAV using deterministic sine waves, envelopes and seeded noise. Pellicule combines the picture and sound when you pass `-a soundtrack.wav`.

This separation makes each change explicit: edit the picture and rerender, or edit the score, regenerate the WAV and rerender. The score uses original synthesis with no third-party samples. Read the [credits](/examples/CREDITS.txt) before adapting the artwork or audio.

## Keep the result predictable

There are no remote images, web fonts or network-dependent data in this example. It uses the system's Arial/Helvetica fonts; those can look different on another operating system. For exact typography across machines, supply a licensed font file and wait for it to load before rendering.

Test a short frame range while editing, then review the full MP4 with sound. A still frame can prove placement; it cannot prove the timing or audio sync. Continue with [timing and sound](/guides/timing-and-output).