CF

Build fancy landing pages with React and Threejs

38m 9s
English
Paid
Updated September 2026

Build fancy landing pages with React and Threejs is a 1-lesson 38 minutes self-paced course by Paul Henschel (0xca0a). Add Award-Winning Web Graphics Without the Complexity Sites featured on Awwwards or FWA can look like they're built with graphics wizardry out of reach for a typical front-end developer who only knows JavaScript, HTML, and CSS.

Course facts

Lessons
1
Duration
38 minutes
Level
All levels
Language
English
Updated
2026-09-11
Instructor
Paul Henschel (0xca0a)
Price
Premium

Add Award-Winning Web Graphics Without the Complexity

Sites featured on Awwwards or FWA can look like they're built with graphics wizardry out of reach for a typical front-end developer who only knows JavaScript, HTML, and CSS. This course, taught by Paul Henschel of the poimandres tooling ecosystem, shows how the same kind of visual flourishes can be added with surprisingly little code once you're working with the right abstractions in React.

What's Covered

Working from a deconstruction of an existing site, you'll set up a development environment from scratch, learn to express Three.js scenes declaratively inside React, and cover the basics of animation. The course also walks through finding and preparing 3D model assets in Blender, then displaying, composing, lighting, and adding post-processing effects to bring a scene together.

Who It's For

It's aimed at beginners and intermediates alike. A basic grasp of React is expected, but prior Three.js experience isn't required going in.

Beginners and intermediates may enjoy it the most. You need to have a basic grasp of React, and perhaps already Threejs, though that can come later.

The result: https://bananas.vercel.app

The curriculum:

  • Deconstruction of playful.software

  • Setting up a dev environment from scratch

  • Expressing Threejs in React

  • Animation basics

  • Finding and preparing (in Blender) model assets

  • Displaying and composing them

  • Use effects and good lighting

Additional

https://docs.pmnd.rs/react-three-fiber/getting-started/introduction 

https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene

https://github.com/pmndrs/react-postprocessing

https://github.com/pmndrs/drei

https://vitejs.dev/

https://godly.website/

https://github.com/pmndrs/gltfjsx

https://gltf.report/

https://sketchfab.com/

Who teaches Build fancy landing pages with React and Threejs? Paul Henschel (0xca0a)

Paul Henschel (0xca0a) thumbnail

Paul Henschel (online as 0xca0a) is a German developer and the creator of React Three Fiber, react-spring, Drei, Zustand, and a long list of other widely-used libraries in the modern React ecosystem. He is part of the Poimandres open-source collective and one of the most influential figures in React-based 3D and animation work.

His CourseFlix listing carries Build Fancy Landing Pages with React and Three.js. Material is paid and aimed at React developers building 3D / interactive landing pages with React Three Fiber.

What lessons are included in Build fancy landing pages with React and Threejs?

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 1 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Build fancy landing pages with React(-three-fiber) and Threejs
All Course Lessons (1)
#Lesson TitleDurationAccess
1
Build fancy landing pages with React(-three-fiber) and Threejs Demo
38:09
Unlock unlimited learning

Get instant access to all 0 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

What courses are similar to Build fancy landing pages with React and Threejs?

Frequently asked questions

What prerequisites should I have before taking this course?
Before enrolling in this course, you should have a solid understanding of JavaScript, HTML, and CSS. Familiarity with React is also important as the course focuses on using React and Threejs to build landing pages. This background will help you grasp the concepts and techniques discussed throughout the course.
What will I build during the course?
The course focuses on building landing pages using React and Threejs, specifically with the help of react-three-fiber. You'll learn how to add sophisticated graphical elements and interactive features to web pages, similar to those seen on award-winning websites. This practical application will enhance your ability to create visually stunning web experiences.
Who is the target audience for this course?
This course is designed for front-end developers who already have a good understanding of JavaScript, HTML, and CSS, and are looking to expand their skills by incorporating advanced graphics into their web projects. It is particularly beneficial for developers interested in creating visually appealing landing pages using React and Threejs.
How does this course differ from other React courses?
Unlike general React courses, this course specifically focuses on integrating Threejs with React to create visually compelling web pages. It emphasizes the use of react-three-fiber, a library that simplifies the process of incorporating 3D graphics into React applications. The course is tailored for developers looking to enhance their projects with advanced visual elements.
What specific tools or platforms are covered in this course?
The course covers the use of react-three-fiber and Threejs as the primary tools for adding advanced graphics to web pages. These tools are leveraged to create interactive and visually impressive landing pages. The course also touches upon poimandres tooling, which abstracts complex behaviors in graphics programming.
What is not covered in this course?
This course does not cover the basics of React, JavaScript, HTML, or CSS, as it assumes prior knowledge in these areas. It also does not delve into backend development or server-side programming, focusing solely on front-end development and enhancing web pages with 3D graphics.
How much time should I commit to complete this course?
Since the course consists of a single lesson, it is designed to be concise and focused. The exact time commitment will depend on the student's prior experience with the technologies being taught. However, given the specialized nature of the content, students should allocate time to practice and experiment with the tools to fully grasp the concepts.