אתר שמתנהגכמו פרסומת

Create an 8-second, 16:9 photorealistic premium beverage product shot using the supplied first and last frames.

FIRST FRAME: the front-facing ZEST can on the wet peach stone ledge.
LAST FRAME: the supplied close-up of the same can's rear ingredient label.

One continuous shot: a precise half-turn of the physical can, followed by a cinematic camera push toward the ingredients.

0–3.2 seconds:
The can rotates smoothly clockwise by exactly 180 degrees around its own vertical axis. Its base remains in the same position on the stone. The camera stays stationary during this rotation. The front artwork moves naturally around the cylindrical surface until the rear ingredient label faces the viewer.

Both printed sides remain physically attached to the aluminium throughout. Do not dissolve, replace or morph the front artwork into the rear label. Preserve the can's dimensions, lid, rims and condensation. The ice, orange half, peel and background remain in place.

3.2–7.2 seconds:
Once the rear faces the camera, stop the rotation completely. Move the camera forward in one smooth optical dolly toward the ingredient label, progressively matching the supplied end-frame composition. Keep the label in sharp focus and preserve realistic depth and parallax. The whole ingredient list must remain visible.

7.2–8 seconds:
Settle into the supplied end frame and hold a steady, sharply readable composition. Use balanced soft illumination across every ingredient row. Preserve the exact rear-label wording and its CONCEPT FORMULA footer.

Maintain the original warm peach sunlight, brushed silver texture and photographic realism. All movement should be controlled and continuous, suitable for forward and reverse video scrubbing.

No ingredient spotlights baked into this clip: those will be controlled interactively on the website. No cuts, camera orbit, additional rotations, floating can, distorted lettering, new objects, captions or watermarks. Silent video.

Build the complete ZEST website using the attached assets. Implement the site, run it, inspect the result and refine it. This is the consolidated brief and supersedes older instructions included inside the asset ZIP.

THE EXPERIENCE
Create a cinematic website for ZEST, the silver-can blood-orange sparkling-soda concept in the supplied film. Scrolling should feel like directing a premium beverage commercial: the can opens, we travel through citrus, bubbles and ice, the can lands, rotates to reveal its back, and the camera approaches the ingredient label. A moving spotlight then reveals each printed ingredient according to scroll position.
The result should feel tactile, bold, immersive and carefully choreographed. Use real motion from the supplied videos. Make each scene advance the story, with a clear change of scale, material or camera direction. Avoid a template landing page, stacked cards, product grids, sliders and disconnected fade-in sections.
Use the existing project stack if provided. Otherwise use React, TypeScript, Vite and GSAP ScrollTrigger. Keep all website copy in English.

1. INSPECT AND MAP THE ASSETS
Inspect every supplied file before implementing the timeline. Create one media configuration that records the actual paths, dimensions, durations, frame rates, posters and usable trim ranges.
These are logical asset names; map differently named uploads to the correct roles:
* hero-original.mp4: the original ZEST film, 1920 x 1080, 10 seconds, 24 fps.
* hero-frames/frame-0000.webp through frame-0239.webp: if the kit is attached, these 240 consecutive 1280 x 720 frames were extracted from that exact film.
* hero-poster.png and hero-end.png: the original film's first and last frames, if supplied.
* 01-citrus-dive: the close-up of blood-orange flesh, floating droplets and curling peel.
* 02-inside-the-fizz: the can surrounded by bubbles and a flowing amber liquid curve.
* 03-cold-snap: the can surrounded by fractured clear ice and droplets.
* 04-the-landing: the front-facing can on the wet peach stone ledge, with ice, blood orange and orange peel.
* 05-turn-to-ingredients.mp4: the new clip that rotates the can from front to back and pushes toward the ingredient label.
* 05-back-label.png: the supplied high-resolution rear view with the ingredient list and CONCEPT FORMULA footer.
For scenes 01–04, use the supplied animated MP4 when available and retain the corresponding still as its poster/fallback. Those continuation videos are separate assets and may not be included in the original ZIP. Do not assume that an image is a video or that a missing clip has been supplied.
If a continuation clip is missing, implement its scene with the supplied still and restrained camera framing, and report the missing motion asset in the handoff. If the rotation video is missing, use the rear-label still temporarily; do not fake a physical can rotation by stretching or flipping a photograph. Keep building the rest of the experience.
Preserve the exact product identity. Do not invent another can, flavour, package, stock photograph or 3D model.

2. VISUAL DIRECTION
Follow the assets: warm peach and apricot, blood orange, brushed silver, transparent ice, condensation, liquid and natural sunlight.
Starting palette:
* Peach: #E7A06F
* Pale apricot: #FFE0AB
* Blood orange: #D83D0A
* Deep warm text: #452311
Adjust surrounding colours to the actual media edges. Avoid black letterboxing. Natural photographic light gradients should remain intact.
Use oversized, tightly spaced, very condensed uppercase display typography, paired with a restrained readable sans-serif. Set intentional line breaks. Keep website text as live HTML and preserve the physical packaging lettering in the media.
Place desktop copy primarily in the quiet left-hand areas, keeping the can and important action unobstructed. Use fewer words and larger imagery. Avoid glass cards, heavy borders, unrelated gradients, purple/blue styling and decorative icon collections.
The header should contain a small ZEST wordmark and one working link to the ingredient chapter. Add a subtle chapter progress indicator. Keep navigation minimal and functional.

3. SCROLL BEHAVIOUR
Use native page scrolling, one viewport-height visual stage and one master timeline. Pin the outer stage once and animate its children. Do not combine competing sticky and pin systems.
Scrolling is the playback controller:
* Downward scroll advances the video frames and effects.
* Upward scroll reverses them.
* Stopping scroll stops the motion and the ingredient spotlight.
* Jumping to any scroll position reconstructs the correct scene immediately.
* Reloading halfway down the page preserves the appropriate visual state.
No autoplay, looping videos, scroll snapping, long inertial catch-up or timer-driven animations.
Start with approximately twelve viewport heights of active scroll travel on desktop and nine on mobile. Tune the distance after checking the actual motion and reading time. Avoid dead stretches. Use responsive measurements and clean up animation resources on unmount.

4. COMPLETE CHAPTER ORDER
Use this initial allocation of the master timeline:
0–25%: ORIGINAL HERO
Scrub through the entire original film. If using the supplied sequence, select frame round(localProgress * 239).
Opening headline: "OPEN THE / BRIGHT SIDE."
Descriptor: "ZEST / BLOOD ORANGE SPARKLING SODA"
Initial hint: "SCROLL TO OPEN"
Clear the large copy before the lid close-up and the busiest liquid/fruit action. Near the final wide shot, reveal "BLOOD / ORANGE." only where it does not overlap the product.
25–35%: CITRUS DIVE
Scrub the citrus clip, travelling between wet fruit and curling peel.
Headline: "CITRUS. / UP CLOSE."
Use the actual quiet area of the image for type. If only the still exists, use a small forward push and diagonal pan without pretending that the fruit itself is animated.
35–45%: INSIDE THE FIZZ
Scrub the bubble-and-liquid clip. Let the real physical movement dominate.
Headline: "FEEL / THE FIZZ."
Keep the label clear. Avoid adding generic decorative bubbles over the supplied footage.
45–55%: COLD SNAP
Scrub the ice clip, showing the outward motion, settling ice and water reflections.
Headline: "COLD. / BRIGHT. / ZEST."
Maintain the full product silhouette and readable left-hand copy.
55–62%: THE LANDING
Use the landing clip or still to introduce the upright front-facing can.
Reduce visual intensity and prepare the viewer for the product rotation. Clear previous headlines. Align this composition with the opening of the rotation clip.
62–94%: ROTATION AND INGREDIENT REVEAL
Follow the precise local timeline in the next section.
94–100%: FINAL BRAND MOMENT
Transition back to the supplied front-facing landing composition with a short deliberate dissolve. This is a scene transition, not a simulated reverse rotation.
Headline: "TURN UP / THE ZEST."
Descriptor: "Blood orange sparkling soda."
Primary button: "REPLAY THE EXPERIENCE"
The button must return to the beginning and reset the complete visual state.
Use brief transitions within these ranges. Match colour, camera direction and can position where possible. Citrus can use a growing circular mask; ice can use a restrained diagonal reveal. Do not stretch objects to force continuity. No white flashes, black gaps or long periods with two overlapping cans.
Use the source clips' camera motion directly. Do not add excessive CSS zoom on top of an already moving camera.

5. THE INGREDIENT REVEAL
This is the key interactive chapter.
Give this chapter its own normalized local progress q, from 0 to 1, derived from the master timeline. It shares the same pinned stage.
The rotation clip was requested with a 180-degree turn during approximately 0–3.2 seconds, a camera push-in during 3.2–7.2 seconds and a settled final view by 8 seconds. Inspect the actual delivered clip and adjust these time markers to the real action. Never assume generation followed the timing exactly.
Local 0–20%:
Scrub the physical front-to-back rotation. The can turns around its vertical axis until the rear label faces the camera.
Local 20–40%:
Scrub the camera push-in through the actual final frame. Keep the ingredient list visible and in focus.
At local 40%:
Match the video endpoint to the supplied high-resolution back-label still. Align the crop, scale and position before handing off. Use this sharp still for the reading phase to keep the printed words stable. Avoid a visible framing jump. If the video endpoint differs, use a short honest dissolve instead of warping the product.
Local 40–100%:
Hold the camera and label stationary. Move a soft warm-white studio spotlight across these printed rows:
* 40–52%: CARBONATED WATER
* 52–64%: BLOOD ORANGE JUICE
* 64–76%: CANE SUGAR
* 76–88%: CITRIC ACID
* 88–100%: NATURAL ORANGE FLAVOUR
The spotlight must illuminate the actual row on the physical can. Keep the light mostly centered on each row during its interval and interpolate briefly between adjacent rows around the boundaries.
Use a feathered horizontal or elliptical light mask, combined with gentle dimming of the surrounding surface. Create the feeling of studio light travelling down brushed aluminium. Keep the black ink readable. No opaque highlight rectangles, neon borders, flashing or white glare over the words.
Determine row bounds from the supplied image. The final ingredient wraps onto two lines: illuminate both together. Anchor the mask to normalized image coordinates and use exactly the same scaling and offsets as the displayed image. Do not position it with arbitrary viewport pixels.
Keep all non-active ingredients visible at lower emphasis. Preserve the CONCEPT FORMULA footer. Do not replace the label with a floating card or duplicate the list over the can.
A small live heading, "WHAT'S / INSIDE.", may occupy the left-hand negative space. The reading interaction should focus on the physical label.
Every light movement and opacity value must derive from scroll progress, not elapsed time. Reverse scrolling moves the spotlight upward, then reverses the camera push-in and the physical can rotation. Keyboard navigation and chapter links must produce the same state.

6. MEDIA PERFORMANCE
Prefer the prepared hero frame sequence on a responsive canvas. If supplied continuation clips seek poorly, extract real frame sequences from those clips using the available tooling. Do not invent interpolated frames or replace real motion with poster animation.
Use a bounded, direction-aware decoded-frame cache. Start around twenty frames on desktop and ten on mobile, then tune against actual memory use. Do not decode the entire film into memory at once. Prioritize the current target and neighbouring frames, limit concurrent requests, and release evicted ImageBitmaps.
During a loading delay, keep the last valid visual instead of showing a blank canvas. Once the target is ready, display the exact requested frame. Stop unnecessary rendering when nothing changes.
When using video seeking, wait for valid metadata, keep the video paused, muted and playsInline, and coalesce seek requests toward the latest target. Use currentTime rather than fastSeek for accurate positioning. Clamp to the last decodable frame.
Show the first poster immediately. Preload the next scene near its boundary. Avoid React rerenders for every scroll event. Keep all typography as sharp HTML. Cap canvas resolution sensibly and check actual loading performance before making performance claims.

7. MOBILE AND ACCESSIBILITY
Design a deliberate mobile composition. These assets are landscape; do not blindly cover a tall viewport and crop off the product.
Crop only safe background. When no safe crop exists, contain the media within a colour-matched peach stage and place text above or below it. Preserve the action already present in the source, including intentional close-ups. Do not distort the can.
During the ingredient chapter, prioritize label readability over the decorative surroundings. It is acceptable to crop peripheral fruit and ice while keeping the full ingredient list visible. Recalculate the spotlight anchors from the actual displayed-image geometry after resizing.
Use stable viewport sizing, safe-area padding, readable text, comfortable touch targets and visible keyboard focus. Prevent horizontal overflow.
Respect prefers-reduced-motion: present an unpinned readable sequence of stills, all ingredient rows at normal illumination, and a working replay link. Include a skip-to-ingredients link and concise accessible descriptions. Hidden layers must not expose duplicate headings or focusable controls.

8. COPY AND PRODUCT TRUTH
Use the supplied branding and the exact headlines above. The product is a concept, and the ingredient list is illustrative. Retain CONCEPT FORMULA and do not present the formula as independently verified.
Do not invent percentages, nutrition values, zero-sugar claims, health benefits, certifications, prices, reviews, stockists, contact information or purchase links.
Use the working replay button as the default CTA. Only add a purchase destination if a real URL is supplied. No dead controls or fake checkout.
Keep implementation notes and missing-asset diagnostics out of the consumer-facing website. Explain those in the project handoff.

9. IMPLEMENT, CHECK AND DELIVER
Build the complete experience, not just a mockup or plan. Run the application if the environment supports it.
Check desktop, a 390-pixel-wide mobile viewport, forward and backward scrolling, fast scroll jumps, reloading mid-page, resizing, slow asset loading, reduced motion and the replay button.
Specifically verify:
* The hero and available clips display changing real video frames.
* The can rotation uses the correct physical motion from the supplied clip.
* The close-up settles without a crop jump.
* Each ingredient is illuminated in the correct order.
* The final two-line ingredient is fully lit.
* Stopping and reversing scroll work at every stage.
* Product lettering remains readable and website copy does not cover it.
* There are no missing assets, console errors or horizontal overflow.
Fix observed problems, then deliver runnable source and brief setup instructions. Identify where the media map, chapter ranges and ingredient-light anchors are configured. Report only tests actually performed and identify any still-missing motion assets.