# CITA — motion with a stable, usable kiosk

## Implemented now

- Renault Captur 2025 and Renault Trafic 2025 illustrative cutouts replace the service-choice line icons. Generated campaign images, not verified fleet/trim photographs. The model-year wording follows the requested artwork; exact exterior details should be checked against the actual vehicles before commercial use.
- Stronger brand-first text entrance: CITA, then Move, Drive, Be driven. A brief sticky hero and scroll-linked heading exit introduce the kiosk. Native document scrolling stays available.
- Hand cursor over desktop choices/options/buttons; tactile vehicle-image hover. Keyboard focus and touch interaction remain native.
- A subtle ambient light pulse behind the kiosk. This does not animate the photographed travellers or simulate filmed activity.
- Pause/enable motion control and reduced-motion behavior.
- Optional `?intro=film` reuses the actual four-second Component 2A video with its original baked-in typography, with no duplicate HTML headline. It plays once and can be replayed. The film has a different airport view and stronger sunset grading than the approved continuity images; compare it as an alternate, not an exact continuation of the current scene.

## Recommended moving-background construction

Keep three independent layers: fixed-camera terminal video at the back; kiosk casing in front; real HTML screen on top. The same terminal video continues behind choice, rental, transfer and review states. Clicking a button changes HTML, not the video. No need to cut out the screen from every video frame, track camera motion or create a fake camera walk.

Use the clean `terminal-continuity.png` as the video starting frame. It already has no kiosk, so no animated screen or duplicate panel needs removal. A moving clip containing a kiosk is more fragile: it would require stable geometry and a perfectly covered screen, and people must not cross in front of it. Generating the environment alone avoids that dependency.

## Ready-to-use video brief

Animate the supplied terminal-continuity.png as a single 8-second locked-off tripod shot. Preserve the camera position, lens, framing, stone columns, glass doors, pavement, lighting and perspective exactly. No pan, tilt, zoom, dolly, orbit, cuts, scene changes or focus pulls. No kiosk, panel, text, logos or new foreground objects. Only restrained natural motion: a few existing distant travellers take slow steps, luggage rolls with them, tiny natural glass/reflection changes. Keep the central foreground clear. No person approaches the camera, grows larger, changes identity or crosses the future central kiosk position. Natural real-time motion, no slow-motion drift. Silent 1920×1080, 24 or 30fps. Keep exposure constant. Aim for a quiet repeating composition, but do not reverse human motion to create a loop.

After receiving the clip: verify camera registration, travellers, cadence and the loop seam; encode MP4/WebM and retain a still poster. If the seam is visible, choose a better interval or play once rather than crossfade people into ghosts. Pause off-screen and when the tab is hidden. Respect reduced motion. Do not scrub this video with page scroll.

No matching terminal video was generated in this update. The working alternate intro uses an existing local video; the main terminal remains a still with a light effect.

## References inspected

- Local `component-2a.html` and its `assets/media/airport-desktop.mp4` (4.04 seconds), with existing captured frames.
- [Renault Captur official model introduction](https://media.renault.com/new-renault-captur-the-b-segment-voiture-a-vivre/?lang=eng).
- [Renault Trafic passenger model](https://www.renault.fr/vehicules-particuliers/trafic.html?gradeCode=ENS_MDL2PSL1SERIELIM1).

Both visual choices continue to route into the existing prototype forms. The model images do not establish availability, pricing or an assigned transfer vehicle.

## Verification
Browser-checked the hero, both new transparent vehicle visuals, rental and transfer form navigation, and the optional Component 2A film. The film reaches its final frame at 4.042 seconds and exposes Replay intro. Matching terminal background footage is still pending.

## Scroll revision — 7 September 2026
The default entrance now uses Component 2A. Use ?intro=still for the typography alternative.
The hero pins for a short scroll distance. Scroll progress scales the outgoing view, crossfades the matching warm terminal background, and moves the kiosk from a smaller perspective into its stable final position. Scroll reverses the transition. This is an editorial dissolve, not a physically reconstructed camera move.
The kiosk is inert during the early transition, then returns to normal HTML interaction. Pausing motion removes the pin and transition. The service choices retain the vehicle illustrations but remove model/year labels and arrows.

The warm background terminal-film.png was generated from the Component 2A final frame with the built-in image tool. It is a new view matching the palette and architecture, not an exact film frame or an actual photograph of Beauvais. Source: exec-c8d5521e-3f3b-4af7-9252-c2ae9491135d.png.

### Next motion asset
Use terminal-film.png as the starting reference for an 8-second locked-tripod shot. Keep the camera, architecture, lighting, central clear space and exposure fixed. Only the small distant travellers at the edges move naturally. No kiosk, UI, words, camera movement, cuts, new foreground people or foreground vehicles. Match the first and last frame as closely as possible without reversing human movement.
Place the eventual clip behind the existing HTML kiosk and retain this image as its poster. Do not animate the entire completed interface or embed its buttons into video.
The kiosk background currently remains a still image. Scroll movement is real; ambient human movement still requires this separate video asset.

### Browser verification
Confirmed default film playback, final kiosk view, removed choice labels/arrows, no horizontal overflow at the inspected desktop width, and the rental form opening after the transition. The existing booking logic has not been changed.
Stability revision: replaced per-frame scroll-position compensation with native CSS sticky within a measured journey wrapper. Removed kiosk rotation and separate image scaling. Browser checked full reveal and transfer button activation; JavaScript syntax check passes. Three generated kiosk composition options are in kiosk-directions.html, pending user selection. Smoothness still needs subjective review on the user device.
Frame timeline revision: 97 JPEG frames extracted locally at 24 fps and 1280px width from Component 2A; no autoplay video remains. First 68% of the 3.5-viewport timeline scrubs frames; 68–76% holds the last frame; final 24% dissolves into kiosk-selected.png. Reverse scroll reverses the sequence. Five concurrent image loads retain the previous decoded frame if the requested one is pending. The selected photo is lightly cooled from the supplied reference and has semantic HTML service hit areas aligned over its two photographed buttons. Rental activation browser checked; full frame endpoints checked. Three enclosure concepts are linked in kiosk-designs.html. Background traveller animation remains pending; alternatives are concepts, not substituted into the main experience.


_Auto-linked by Marco: parent [[2_CONNECTIONS/projects/CITA-Website-Component1/README|CITA-Website-Component1]]_