I came across the concept of components last semester while designing my personal portfolio website. I made a simple component button with 1 variant state - when the primary picture is hovered over, it will go into its variant state where the picture lights up a little;

While doing research on Apollo 11, the most confusing thing for me was all the different parts of the rocket ship.

Having now understood the complexity of the Saturn V rocket and the Apollo spacecraft through research, I wanted to make an interactive rocket so that the user can more effectively understand all the different parts of the ship, and also come back to the rocket for reference if they get confused during the web story.

I sketched out a plan into my sketchbook to gain a better picture of what I had in mind;

My idea was that when the user hovers over the names of the different sections of the rocket ship, the corresponding part will light up. In the same way, when the section of the rocket ship has hovered over, the corresponding names will light up.

I soon realised that I needed to create a complex component with multiple variants. This means that depending on the action the user takes on the primary state ( the section of the rocket/name they hovered over), it will show users different variant states ( corresponding name/section of the rocket)

First, I needed to create the primary variant. Originally I was going to draw my own rocket ship on vectornator, but while looking for inspiration online, I found an amazing Saturn V illustration in Wikipedia Commons;

(https://commons.wikimedia.org/wiki/File:Saturn_V.svg art by charner1963)