A Three.js and WebGL educational demo with animated Earth, planet facts, quizzes and scroll-based storytelling.
Back to Cristina Geafar portfolio
This page is a portfolio demo showing how a simple science topic can become an interactive 3D learning experience.
Built with Three.js, WebGL, JavaScript and scroll-based storytelling, this project turns planet facts into a visual educational journey.
Instead of a static article about the Solar System, users can scroll through planet sections, watch the animated Earth move across the page, open extra facts, and answer small quiz questions.
This type of page can be adapted for schools, science clubs, kids education platforms, museums, online learning websites, or brands that want an interactive educational experience.
✨ Portfolio purpose: demonstrate interactive 3D web design, not just a page about astronomy.
This project shows how 3D design, storytelling and simple quiz logic can be combined into one educational web experience.
It demonstrates scroll-based interaction, animated 3D visuals, responsive layout, structured educational content and basic interactive learning features.
For a client, the same structure could become an interactive lesson page, a museum exhibit, a kids learning platform, a science landing page, or a branded educational experience.
The goal is not only to show planets. The goal is to show how a topic can become easier to understand when users interact with it visually.
✨ Portfolio value: this page proves that I can build interactive 3D learning experiences, not only static websites.
A 3D Solar System page can become a template for many educational and storytelling projects.
The same idea can be used for science lessons, geography, biology, history timelines, museum exhibits, or kids learning platforms.
For a school or learning brand, this type of page can make lessons more engaging. Students do not only read facts — they interact with the content, scroll through sections, open quizzes, and connect visual motion with information.
For a portfolio, this project shows skills in frontend development, Three.js, WebGL, animation, layout structure, accessibility basics, SEO and educational content design.
Visit my main portfolio or explore my 3D Car Configurator demo.
✨ Useful for: schools, kids education websites, museums, science content and interactive learning platforms.
The animated 3D Earth follows the learning journey while you scroll through planet stories.
💡 Did you know? Interactive motion can help make educational content feel easier to explore.
This section introduces the experience. The Earth stays visible while users move through short planet stories, facts and quizzes.
The goal is to make science content feel less like a static textbook page and more like a guided interactive journey.
✨ Moral: Good educational design should make curiosity easier.
Mercury is the closest planet to the Sun and the fastest planet in the Solar System.
💡 Did you know? A year on Mercury is only 88 Earth days.
Mercury has almost no atmosphere, which means temperatures can change dramatically between day and night.
In an interactive learning website, short facts like this can be paired with animation and quiz questions to make students remember more easily.
Which planet orbits the Sun in about 88 Earth days?
✨ Learning idea: fast orbit, short year, extreme temperatures.
Venus is covered by thick clouds and has an extremely hot surface.
💡 Did you know? A day on Venus is longer than its year.
Venus rotates very slowly and in the opposite direction compared with most planets. Its atmosphere traps heat, making it the hottest planet in the Solar System.
Which planet has retrograde rotation?
✨ Learning idea: Venus shows how atmosphere affects temperature.
Earth has liquid water, breathable air and the right conditions for life as we know it.
💡 Did you know? About 71% of Earth’s surface is covered by water.
Earth is the only planet known to support life. Its atmosphere, oceans and magnetic field help create a stable environment.
Which planet has abundant liquid water on the surface?
✨ Learning idea: Earth is special because water, air and life connect.
Mars is known for its rusty red color, dusty landscapes and robotic explorers.
💡 Did you know? Olympus Mons on Mars is the tallest known volcano in the Solar System.
Mars has volcanoes, valleys, polar ice and evidence that water once flowed on its surface.
Olympus Mons is on which planet?
✨ Learning idea: Mars helps students imagine exploration beyond Earth.
Jupiter is the largest planet in the Solar System and has a famous giant storm.
💡 Did you know? Jupiter could fit more than 1,000 Earths inside it.
Jupiter’s Great Red Spot is a huge storm that has lasted for centuries. Its many moons make it feel like a mini solar system.
Which planet hosts the Great Red Spot?
✨ Learning idea: Jupiter teaches scale, storms and gravity.
Saturn is famous for its bright rings made of ice and rock particles.
💡 Did you know? Saturn is less dense than water, although it is much too large to place in any ocean.
Saturn’s rings are not solid. They are made of countless small pieces of ice and rock orbiting the planet.
Which planet is famous for its bright, extensive rings?
✨ Learning idea: Saturn makes orbital motion easy to visualize.
Uranus rotates on its side, which gives it very unusual seasons.
💡 Did you know? Uranus has an axial tilt of about 98 degrees.
Because Uranus is tilted so much, each pole can experience long periods of sunlight and darkness.
Which planet has an axial tilt of about 98°?
✨ Learning idea: Uranus helps explain rotation, tilt and seasons.
Neptune is far from the Sun, very cold and known for extremely fast winds.
💡 Did you know? Neptune’s winds can exceed 1,500 mph.
Neptune is a deep blue ice giant. Even though it receives little sunlight, its atmosphere is active and dynamic.
Which planet is known for the fastest winds?
✨ Learning idea: Neptune shows that distant planets can still be active worlds.
This Solar System demo can be adapted into many types of interactive educational or storytelling websites.
Useful for schools, learning platforms, museums, science content, kids brands and creative portfolios.
I can build a first version of a 3D educational page, interactive lesson, product story, or visual portfolio concept using HTML, CSS, JavaScript, Three.js and WebGL.
You can also explore my 3D car configurator demo to see another example of browser-based 3D interaction.
Contact me about a project · View the 3D Car Configurator
✨ Start small: one interactive demo first, then expand it into a larger learning platform or brand experience.
It is a browser-based educational demo that uses Three.js and WebGL to show an animated 3D Earth, planet facts, quizzes and scroll-based storytelling.
Yes. The page is designed as a beginner-friendly educational experience with short planet stories, fun facts and simple quiz questions.
This project uses HTML, CSS, JavaScript, Three.js, WebGL and GSAP to create the animated 3D Earth, cosmic background, scroll interaction and quizzes.
Yes. The same structure can be adapted for science lessons, geography, history timelines, biology, museum exhibits, kids education platforms and interactive school projects.
It proves that 3D visuals, storytelling, responsive layout and simple quiz logic can be combined into an interactive educational web experience instead of a static article.
This interactive 3D Solar System demo was created by Cristina Geafar as part of a portfolio focused on AI tools, 3D websites and interactive web experiences.