Cinematic Scroll-Based Hero Section Creation
Budget: $250 – $750 USD
Project Brief – Cinematic Scroll-Driven Hero Section
I'm looking for an experienced front-end 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.
Payment will be released only after final approval of the completed project, including animation quality, responsiveness, source code and editable assets.
Deliverables
1. Cinematic Video
Create a 20-second premium animation based on the reference image.
Requirements:
1920x1080 minimum (4K preferred)
MP4 + WebM
Seamless loop preferred
Suitable as a landing page hero background
The animation should include:
Progressive path illumination
Moving glow following the selected route
Animated arrows
Subtle particles/light pulses
Cards activating as the journey progresses
Small character movements (head, hands, dashboards, UI)
Final emphasis on Resultado
2. Scroll-Driven Landing Page
Develop a working implementation (HTML/CSS/JavaScript or React).
GSAP + ScrollTrigger is preferred.
The hero section should reproduce the same cinematic experience using scroll.
Scroll sequence:
Wide camera overview
Path activates from Escolha
Camera slowly pans to Trade-off
Alternative paths become visible
Main route continues to Consequência
Secondary route highlights Renúncia as a strategic choice
Camera reaches Resultado
Final scene reveals the complete illuminated journey
Desktop is the priority.
Tablet should adapt naturally.
Mobile may use a simplified animation or video version.
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 colors
Soft shadows
Spacious layout
Elegant camera movement
Avoid:
Cartoon style
Dark themes
Cluttered compositions
Excessive realism
Heavy visual effects
Required Animation Effects
Path
Progressive activation
Soft glow
Animated arrows
Energy flowing through the selected route
Cards
Each stage should include subtle microanimations:
Scale
Glow
Opacity
Shadow
Slight floating effect
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 a conscious strategic prioritization.
Suggested description:
"Giving up what matters less now to prioritize what creates greater value."
Avoid icons such as X, lock or failure.
Prefer:
Alternative path
Strategic marker
Calm gray/blue node
Balanced decision icon
Editable Content
Text labels should be easy to modify through a JSON object or configuration file.
Example:
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 text labels without rebuilding the entire visual.
Technical Requirements
Preferred technologies:
React or HTML/CSS/JavaScript
GSAP ScrollTrigger
SVG Path Animation
CSS Transforms
Optional:
Blender
After Effects
Rive
Lottie
Canvas/WebGL (only if justified)
The project must include:
Clean source code
Organized structure
Reusable components
Editable assets
Local setup instructions
Optimized media
Final Package
Deliver:
MP4
WebM
Working HTML/React implementation
Complete source code
Editable labels
Assets
Project files
Deployable build or preview link
I'm looking for an experienced front-end 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.
Payment will be released only after final approval of the completed project, including animation quality, responsiveness, source code and editable assets.
Deliverables
1. Cinematic Video
Create a 20-second premium animation based on the reference image.
Requirements:
1920x1080 minimum (4K preferred)
MP4 + WebM
Seamless loop preferred
Suitable as a landing page hero background
The animation should include:
Progressive path illumination
Moving glow following the selected route
Animated arrows
Subtle particles/light pulses
Cards activating as the journey progresses
Small character movements (head, hands, dashboards, UI)
Final emphasis on Resultado
2. Scroll-Driven Landing Page
Develop a working implementation (HTML/CSS/JavaScript or React).
GSAP + ScrollTrigger is preferred.
The hero section should reproduce the same cinematic experience using scroll.
Scroll sequence:
Wide camera overview
Path activates from Escolha
Camera slowly pans to Trade-off
Alternative paths become visible
Main route continues to Consequência
Secondary route highlights Renúncia as a strategic choice
Camera reaches Resultado
Final scene reveals the complete illuminated journey
Desktop is the priority.
Tablet should adapt naturally.
Mobile may use a simplified animation or video version.
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 colors
Soft shadows
Spacious layout
Elegant camera movement
Avoid:
Cartoon style
Dark themes
Cluttered compositions
Excessive realism
Heavy visual effects
Required Animation Effects
Path
Progressive activation
Soft glow
Animated arrows
Energy flowing through the selected route
Cards
Each stage should include subtle microanimations:
Scale
Glow
Opacity
Shadow
Slight floating effect
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 a conscious strategic prioritization.
Suggested description:
"Giving up what matters less now to prioritize what creates greater value."
Avoid icons such as X, lock or failure.
Prefer:
Alternative path
Strategic marker
Calm gray/blue node
Balanced decision icon
Editable Content
Text labels should be easy to modify through a JSON object or configuration file.
Example:
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 text labels without rebuilding the entire visual.
Technical Requirements
Preferred technologies:
React or HTML/CSS/JavaScript
GSAP ScrollTrigger
SVG Path Animation
CSS Transforms
Optional:
Blender
After Effects
Rive
Lottie
Canvas/WebGL (only if justified)
The project must include:
Clean source code
Organized structure
Reusable components
Editable assets
Local setup instructions
Optimized media
Final Package
Deliver:
MP4
WebM
Working HTML/React implementation
Complete source code
Editable labels
Assets
Project files
Deployable build or preview link