✨ Add rocket 🚀

components/common/Header.tsx

@@ -33,7 +33,7 @@ export const Header = ({ title }: { title: string }) => {
 				<IonImg
 					src="/icon.png"
 					slot="start"
-					className="w-10 h-10 ml-4"
+					className="w-10 h-10 ml-2" // Needs to align with starship and trajectory
 				/>
 				<IonTitle>{title}</IonTitle>
 				<IonButtons

components/common/Starship.tsx

@@ -0,0 +1,21 @@
+import Image from 'next/image'
+import { cn } from './cn'
+
+import React, { forwardRef } from 'react'
+
+const Starship = forwardRef<HTMLImageElement, { className?: string }>(
+	function Starship({ className }, ref) {
+		return (
+			<Image
+				alt="A starship from a birds-eye view"
+				className={cn('starship', className)}
+				src="/starship.png"
+				layout="fill"
+				quality={100}
+				ref={ref}
+			></Image>
+		)
+	},
+)
+
+export default Starship

components/common/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...args: ClassValue[]) {
+	return twMerge(clsx(args))
+}

components/demo/Journey/index.tsx

@@ -1,5 +1,12 @@
-import { createRef, useLayoutEffect, useRef, useState } from 'react'
-import Starship from '../../landingPage/Journey/Starship'
+import {
+	createRef,
+	RefObject,
+	useEffect,
+	useLayoutEffect,
+	useRef,
+	useState,
+} from 'react'
+import Starship from '../../common/Starship'
 import Todos from '../../todos'
 import { Todo } from '../../todos/interfaces'
 import { useWindowSize } from '../../common/useWindowResize'
@@ -50,18 +57,44 @@ function useMaintainScrollOffset(currentTodoRef, todosRef) {
 	}, [currentTodoRef, todosRef])
 }
 
-function useStarshipYPosition(currentTodoRef) {
+export function useStarshipYPosition(
+	starship: HTMLElement | null,
+	nextTodoPosition: DOMRect | null,
+	nextTodoHeight: number | null,
+	commonAncestor: HTMLElement | null,
+) {
+	console.log('Starship position render')
 	const size = useWindowSize()
 	const [starshipY, setStarshipY] = useState<number>(0)
 
 	// TODO: This causes it to render a second time when a todo completion changes the scroll height. But maybe that doesn't matter and maybe we can move the starship into its own component hierarchy so it doesn't re-render other things unnecessarily.
-	useLayoutEffect(() => {
-		const elementPadding = 80
-		const starshipImagePadding = 10
-		setStarshipY(
-			currentTodoRef.current.offsetTop - elementPadding - starshipImagePadding,
+	useEffect(() => {
+		console.log('Starship position effect')
+		if (
+			starship === null ||
+			nextTodoPosition === null ||
+			nextTodoHeight === null ||
+			commonAncestor === null
 		)
-	}, [currentTodoRef, size, setStarshipY])
+			return
+
+		const commonAncestorRect = commonAncestor.getBoundingClientRect()
+		const todoDistanceFromCommonAncestor =
+			nextTodoPosition.y - commonAncestorRect.y
+		const starshipHeightAdjustment =
+			(nextTodoHeight - starship?.offsetHeight) / 2
+
+		const y = todoDistanceFromCommonAncestor + starshipHeightAdjustment
+		console.log(`Setting startship Y to ${y}`, {
+			// todoId: nextTodo.dataset.id,
+			// hasCorrectAttr: nextTodo.dataset.nextTodo,
+			commonAncestorRect,
+			nextTodoPosition,
+			todoDistanceFromCommonAncestor,
+			starshipHeightAdjustment,
+		})
+		setStarshipY(y)
+	}, [commonAncestor, nextTodoPosition, nextTodoHeight, size, starship, setStarshipY])
 
 	return [starshipY, setStarshipY]
 }

components/landingPage/Journey/Trajectory.tsx

@@ -1,3 +1,13 @@
-export default function Tracjectory() {
-	return <div className="trajectory h-full w-[2px] bg-supernova"></div>
+import { cn } from '../../common/cn'
+
+export default function Tracjectory(props: JSX.IntrinsicElements['div']) {
+	return (
+		<div
+			className={cn('trajectory h-full w-[2px] bg-supernova', props.className)}
+			style={{
+				maskImage: 'repeating-linear-gradient(180deg, black, transparent 10px)',
+				// maskSize: '10px 100%',
+			}}
+		></div>
+	)
 }

components/landingPage/Journey/index.tsx

@@ -1,4 +1,4 @@
-import Starship from './Starship'
+import Starship from '../../common/Starship'
 import Tracjectory from './Trajectory'
 
 export default function Journey() {

components/landingPage/Layout.tsx

@@ -4,7 +4,7 @@ import Footer from '../common/Footer'
 import Planets from '../common/Planets'
 import { ScrollDirection } from '../common/scroll'
 import Contact from './Contact'
-import Starship from './Journey/Starship'
+import Starship from '../common/Starship'
 import Tracjectory from './Journey/Trajectory'
 
 const Layout = ({