Interactive Cinematic Hero Section Development (Only Experienced with real reference)

I am looking for an experienced front-end developer / creative developer / motion designer to build a premium cinematic hero section for a SaaS web application. The experience is based on an attached reference image representing a decision-making journey. The objective is to create an elegant, modern, scroll-driven storytelling experience that communicates how users learn through decisions, trade-offs, consequences and measurable outcomes. This project requires both: Recreating/generating all visual assets needed for the experience Building the scroll-driven interactive hero section The selected professional will be responsible for generating, separating, adapting or recreating all assets required to reproduce the reference image as faithfully as possible in an interactive web experience. The final result must feel premium, polished and cinematic — not like a static image with simple fade effects. Payment will be released only after final approval of the completed project, including animation quality, responsiveness, source code, editable assets and fidelity to the reference image. Important Requirement Before Applying I will only consider proposals that include concrete examples of previous work. Please do not apply with generic portfolios. Your proposal must include links to projects you have already completed that demonstrate: Cinematic scroll-driven web experiences; GSAP / ScrollTrigger animations; Camera movement or pinned scroll sections; Animated storytelling through scroll; Layered visual assets animated on a landing page. Examples similar to the interaction style of this reference are preferred: must be very similar to [login to view URL] The reference website is only an interaction benchmark. The final design should follow the attached image and the visual direction described below. Scope of Work 1. Asset Creation / Reconstruction The contractor is fully responsible for creating all assets necessary to build the hero section. The attached reference image should be used as the main visual guide. The goal is to preserve the concept, style and composition as faithfully as possible, while adapting it for web animation. The image includes: A clean isometric / soft 3D decision path; A white elevated curved route; Colored decision nodes; Professional office environment; Cards connected to each step; Route lines and arrows; A side path representing “Renúncia”; A premium SaaS aesthetic. The assets may be created using any appropriate workflow, including but not limited to: Figma; Photoshop; Illustrator; Blender; SVG; PNG/WebP with transparency; GLB/GLTF if needed; AI-assisted asset generation, provided the final result is polished and usable. However, I will not accept raw AI outputs without refinement. The assets must be clean, organized, optimized and ready for web animation. Expected asset quality: Transparent backgrounds where needed; Clean edges; Consistent lighting and perspective; Faithful colors and materials; Soft shadows; Organized layers; Assets separated for animation; Visual consistency with the reference image. The text inside the cards should not be baked into the images. Text labels must be editable in code. 2. Scroll-Driven Landing Page Develop a working implementation using: React, or HTML/CSS/JavaScript. GSAP + ScrollTrigger is strongly preferred. The hero section should reproduce a cinematic scroll-based experience. The user should feel as if they are moving through the decision journey. Scroll Sequence The scroll experience should follow this narrative: Wide or introductory view of the journey; Camera focuses on Escolha; Path activates from the first decision point; Camera slowly moves toward Trade-off; Alternative paths become visible; The main route continues toward Consequência; The secondary route highlights Renúncia as a strategic conscious choice; Camera reaches Resultado; Final scene reveals the complete illuminated journey. - Must work properly on Desktop - Mobile may use a simplified version of the experience, but it still needs to preserve the storytelling. - Tablet should adapt naturally. Visual Direction The design should preserve the concept of the reference image: Clean isometric / soft 3D style; White curved decision path; Colored decision nodes; Professional office environment; Premium SaaS aesthetic; Bright and elegant colors; Soft shadows; Spacious layout; Smooth camera movement; Polished, modern and human feel. Avoid: Cartoon style; Dark themes; Cluttered compositions; Excessive realism; Heavy visual effects; Generic SaaS template look; Overly futuristic or cyberpunk visuals. Required Animation Effects The animation should include: Path Progressive activation; Soft glow; Animated arrows; Energy or movement flowing through the selected route; Smooth transitions between route sections. Camera Pinned scroll section; Smooth pan and/or zoom; Cinematic movement through the visual journey; Final zoom-out or full journey reveal. Cards and Nodes Each stage should include subtle microanimations: Scale; Glow; Opacity; Shadow; Slight floating effect; Active/inactive states; Smooth entrance and exit transitions. Stages: Escolha; Trade-off; Consequência; Renúncia; Resultado. Renúncia Concept This is important. Renúncia must not be presented as failure. It represents conscious strategic prioritization. Suggested meaning: Giving up what matters less now to prioritize what creates greater value. Avoid icons such as: X; Lock; Warning; Failure signs; Broken paths. Prefer: Alternative path; Strategic marker; Calm gray/blue node; Balanced decision icon; Subtle secondary route; Reflective visual treatment. Renúncia should feel like a side storytelling layer, not a fifth main step. Editable Content Text labels must be easy to modify through a JSON object, configuration file or equivalent structure. Example: const steps = [ { id: "choice", number: "01", title: "Escolha", description: "Escolha um caminho e assuma a direção." }, { id: "tradeoff", number: "02", title: "Trade-off", description: "Priorize um foco e abra mão de outro." }, { id: "consequence", number: "03", title: "Consequência", description: "Cada escolha gera impactos reais." }, { id: "result", number: "04", title: "Resultado", description: "Transforme escolhas em resultados." }, { id: "renunciation", number: null, title: "Renúncia", description: "Abrir mão do que importa menos para priorizar o que gera mais valor agora." } ]; I should be able to easily change labels and descriptions without rebuilding the visual assets. Technical Requirements Preferred technologies: React or HTML/CSS/JavaScript; GSAP; ScrollTrigger; SVG path animation; CSS transforms; Optimized PNG/WebP/SVG assets. Optional, if justified: Blender; [login to view URL]; GLB/GLTF; Rive; Lottie; Canvas/WebGL. The project must include: Clean source code; Organized folder structure; Reusable components; Editable text configuration; Optimized assets; Local setup instructions; Responsive behavior; Deployable build or preview link. Final Package Deliverables must include: Working HTML/React implementation; Complete source code; Editable text labels/configuration; All final assets used in the implementation; Editable source files for the assets when applicable; Organized asset folder; Local setup instructions; Deployable build or preview link. Approval Criteria The project will only be approved if: The final experience is visually faithful to the reference image; The contractor successfully creates or reconstructs all required assets; The hero section feels cinematic and premium; Scroll interactions are smooth and polished; The experience works well on desktop; Tablet and mobile have acceptable adaptations; Text is editable; Code is clean and organized; Assets are optimized and properly structured; The final result does not feel like a generic template or basic scroll animation. Proposal Instructions When applying, please include: Links to concrete projects you have already completed using GSAP, ScrollTrigger or similar cinematic scroll mechanics; A short explanation of how you would recreate or generate the assets from the reference image; Whether you plan to use 2D layers, SVG, 3D/GLB, WebGL or a hybrid approach; Estimated timeline; Total price; Any limitations or assumptions. Proposals without concrete examples of previous scroll-driven cinematic work will not be considered.

Project ID: 40567290