9 Topics

All techniques are explained step-by-step in a beginner-friendly format, so you can easily follow along in a cohesive and structured way.

1. Create a 3D Site with Spline and React
Design and code a landing page featuring an interactive 3D asset using Spline and CodeSandbox.
Duration: 3:49

2. Recreate UI to 3D in Spline
Transform your 2D Figma UI into a 3D interface in Spline using layers and camera perspectives.
Duration: 9:45

3. Create a 3D Blob in Spline
Use a sphere with a displace material to build a 3D blob with smooth gradient shading.
Duration: 6:46

4. 3D Animations and Interactions in Spline
Add entry animations and mouse hover interactions using states within your 3D canvas.
Duration: 8:39

5. Lighting and Shadows in Spline
Explore lighting techniques like Lambert shading and soft shadows, and animate your blobs for dynamic effects.
Duration: 4:44

6. Export to Web
Export your interactive 3D design from Spline to CodeSandbox using ReactJS and the Styled Components library.
Duration: 8:01

7. Custom Fonts and Flexbox
Integrate Google Fonts in CodeSandbox and apply Flexbox layout techniques with spacing and alignment.
Duration: 6:40

8. Import Images and Buttons
Export SVG assets from Figma, import them into CodeSandbox, and build buttons with smooth transitions.
Duration: 9:34

9. Adaptive Layout
Use media queries to make your layout responsive across devices and apply CSS transforms to scale your 3D elements.
Duration: 5:36