Build a complete, polished, interactive landing page. Use clear, natural copy and a restrained layout with purposeful controls. Keep native scrolling, support phone and desktop layouts, keyboard controls, and reduced motion. The main interaction should work without a runtime AI call or account.
Scenario: Frame Studio is an imagined independent motion-design practice. Its landing page should let a prospective client see the quality of its work and understand how a campaign develops. Show animation, composition, and audiovisual-interface skills through original work.
Art direction: bold black and white with acid lime and ultramarine accents, large direct headings, sharp grids and generous full-bleed motion stages. It should feel like a contemporary creative studio.
Hero: “Motion design for products and campaigns.” Create a short original silent showreel with three visually distinct scenes: a sculptural product reveal, a typographic transformation and an abstract material study. These should be actual coherent authored animations or original rendered clips, not stock footage or a screenshot pretending to play. Use real 3D/procedural geometry when useful and keep the initial load sensible.
The signature interaction is a visible, scrubbable film timeline that drives the hero stage. Visitors can play/pause, drag to an exact frame and select a scene. Playback, timeline position and active scene must always agree. On scroll, the same stage transitions into a project story rather than restarting random animation.
For each of the three projects, provide a useful “Storyboard / Final” comparison. A draggable divider or toggle should compare matching compositions at the same moment, with concise production notes about what changed. Offer widescreen/portrait format previews that deliberately recompose the motion within each frame, not merely crop the important object away.
Follow with a compact project index and a local shortlist. A “Save project references” action downloads a contact-sheet PDF or image containing the chosen frames/projects, providing a real outcome. No real client logos, fabricated awards or fake submitted contact form.
Use purposeful motion timing, controlled easing and excellent typography. Avoid full-page cursor gimmicks that interfere with reading. Provide reduced-motion still sequences, keyboard timeline control and usable phone playback. Test seeking, pause, format switching, project comparisons, saved-frame fidelity and scroll position changes. Deliver a studio landing page with three finished original pieces and a working way to inspect the craft.
