3D Model Scroll-Driven Landing Page Creation
Budget: $30 – $250 USD
Hello, i am looking for a developer capable of creating a scroll-driven presentation landing page with 3d model
The storyboards are in the figma layout attached below. Figma file contains more instructions of what i would like to acieve
The Figma layout on the right shows the animation of the storyboard of the text and the 3d object (each frame can be represented as 100vh or one full screen). All the appearances and disappearance of objects can be done using spring animation (spring in frame motion)
A brief description of the text how it should look like:
- A black sphere with breathing animation (keyframes on background gradient) in the center of the screen. The animation is endless. Here is an example of a sphere i need: https://amoureuxvision.com/
- When scrolling down, the text appears first (2 screens)
- Next, text dissapears and a 3D model appears, scrolls 360 degrees during 3 screens
- The sphere dissapears, the text of "The end" appears
I only accept developers with good english knowledge because i would like to ask a few questions about how this whole thing works after receiving the result
Stack:
Next.js 13, Styled Components, React Three Fiber, Framer Motion
Figma and assets:
Assets:
https://drive.google.com/drive/folders/1lnsaZnga9gC5huPLis4fmZq-1YsF-FUs
Figma
https://www.figma.com/file/8zyGJDXxS16kluiJBgUoIk/Dynamic-presentation-concept.-Test-task?type=design&node-id=0-1&mode=design&t=bWDUgAqihkbkSUBv-0
The storyboards are in the figma layout attached below. Figma file contains more instructions of what i would like to acieve
The Figma layout on the right shows the animation of the storyboard of the text and the 3d object (each frame can be represented as 100vh or one full screen). All the appearances and disappearance of objects can be done using spring animation (spring in frame motion)
A brief description of the text how it should look like:
- A black sphere with breathing animation (keyframes on background gradient) in the center of the screen. The animation is endless. Here is an example of a sphere i need: https://amoureuxvision.com/
- When scrolling down, the text appears first (2 screens)
- Next, text dissapears and a 3D model appears, scrolls 360 degrees during 3 screens
- The sphere dissapears, the text of "The end" appears
I only accept developers with good english knowledge because i would like to ask a few questions about how this whole thing works after receiving the result
Stack:
Next.js 13, Styled Components, React Three Fiber, Framer Motion
Figma and assets:
Assets:
https://drive.google.com/drive/folders/1lnsaZnga9gC5huPLis4fmZq-1YsF-FUs
Figma
https://www.figma.com/file/8zyGJDXxS16kluiJBgUoIk/Dynamic-presentation-concept.-Test-task?type=design&node-id=0-1&mode=design&t=bWDUgAqihkbkSUBv-0