Creative Front-End Developer – Interactive 2.5D Video-Based Web Experience (GSAP / HTML5)

The Project: We are seeking a talented Creative Front-End Developer to construct an interactive 2.5D product showcase map for an upcoming corporate campaign. We are building this experience using a 2.5D layered video approach to ensure maximum frame rates on lower-end tablet hardware. The interface will feature 6 distinct environmental zones from a fixed isometric perspective, arranged adjacent to one another to form a single, interconnected 'world map'. The visual assets will be provided by our 3D artist as high-fidelity, pre-rendered, seamless looping video files. Your role is to build a responsive, high-performance interactive web interface that layers and transitions these video files flawlessly, ensuring a crisp 60fps experience on both web browsers and offline Point of Sale (POS) touchscreen displays. WHAT YOU WILL DO: Item 1: Structured Deliverable Construct and deliver a highly optimized, clean, and customizable packaged web folder containing HTML, CSS, JS, and organized video/image assets. Item 2: Video Integration and Layering Seamlessly integrate, layer, and control pre-rendered looping video files (such as transparent WebM or MP4 with alpha channels) to serve as the background and interactive elements of each environmental zone. Item 3: Smooth 1-on-1 Transitions Build high-fidelity transition animations (specifically a 600 to 800 millisecond push-in zoom on an ease-out curve moving from zone to zone) using CSS/JS, complete with intuitive 'Back' and 'Back Home' navigation. Item 4: Hotspots and Overlays Implement interactive, pulsing hotspot indicators that trigger elegant, translucent glassmorphism-style overlay panels displaying up to 4 key features/specs per product. Item 5: Performance Optimization Ensure zero-latency video playback, seamless looping, memory leak prevention (critical for POS displays running 24/7), and perfect responsive layouts for touchscreens and desktop mice. TECHNICAL REQUIREMENTS: Requirement 1: Core Stack Expert-level HTML5, CSS3, and modern Vanilla JavaScript (no heavy, unnecessary frameworks). Requirement 2: Animation Libraries Advanced proficiency with GSAP (GreenSock) or equivalent high-performance web animation libraries to handle complex transition states and UI sequencing. Requirement 3: Video Web-Dev Expertise Deep understanding of HTML5 video API, handling alpha-channel/transparent video formats in browsers, video preloading strategies, and cross-browser video rendering quirks. Requirement 4: 3D Pipeline Awareness A solid understanding of 3D asset pipelines and how to collaborate effectively with a 3D artist (such as aligning on frame rates, resolutions, and video assets). Expert proficiency in Cinema 4D (.c4d) and Arnold render engine (experience with Redshift/Octane is a major plus) is highly valued to streamline this collaboration. Note: Real-time WebGL, Three.js, or .gltf/3D model integration is not required for this scope, as we are prioritizing 2.5D static camera video rendering for peak performance. TO APPLY, PLEASE PROVIDE: Submission 1: A link to your portfolio or live projects showing highly interactive, video-based or heavy-animation web experiences you have built. Submission 2: A brief description of your experience working with GSAP and optimizing web-based video performance. Submission 3: A brief description of your experience working alongside 3D artists/motion designers to integrate their rendered video assets into web layouts, specifically detailing any familiarity with Cinema 4D and the Arnold render engine pipeline. Submission 4: Confirm your availability to deliver a clean, production-ready packaged web folder by our target timeline.