Featured Project

Astralis
Space Tourism

A futuristic web experience for a fictional space tourism company. Designed to inspire wonder and showcase the possibilities of commercial space travel.

Role UI/UX Designer & Developer
Timeline 3 Weeks
Year 2025
Type Concept Project
Astralis Space Tourism Hero
01 — Overview

Project Vision

Astralis represents my vision of what space tourism marketing could look like in the near future. With companies like SpaceX, Blue Origin, and Virgin Galactic making commercial space travel a reality, I wanted to explore how to design an experience that captures both the scientific wonder and the emotional journey of leaving Earth.

The challenge was to create something that feels premium and exclusive while remaining accessible and inspiring. Every element—from the star field animation to the spacecraft 3D interaction—was designed to immerse visitors in the experience of space travel before they even leave the ground.

The Goal

Create an immersive digital experience that makes visitors feel the excitement and wonder of space travel, driving emotional engagement and potential bookings.

Target Audience

High-net-worth individuals, space enthusiasts, and early adopters who are willing to invest in once-in-a-lifetime experiences and value exclusivity.

Key Deliverable

A fully responsive, animated single-page website with custom canvas animations, interactive elements, and a cohesive visual language inspired by the cosmos.

02 — Challenge

Problem & Solution

How do you sell something most people have never experienced? Space travel exists in our collective imagination through movies and NASA footage, but the personal, emotional journey remains unknown. The challenge was bridging this gap—making the impossible feel tangible and the extraordinary feel achievable.

The Problems

Several key challenges needed to be addressed:

  • Space travel feels abstract and inaccessible to most people
  • Existing aerospace websites are often technical and cold, lacking emotional appeal
  • The extreme price point requires building immense trust and perceived value
  • Balancing futuristic aesthetics with usability and performance
  • Creating engagement without overwhelming visitors with information

The Solutions

Strategic design decisions to overcome each challenge:

  • Immersive star field canvas that puts visitors "in space" immediately
  • Human-centered storytelling focusing on the emotional journey, not just specs
  • Premium visual language with subtle animations that convey luxury
  • Progressive disclosure—reveal information as users scroll, maintaining curiosity
  • Social proof through crew profiles and testimonial-style content
03 — Process

Design Journey

From initial concept to final deployment, here's how the project evolved through each phase of development.

Phase 01

Research & Discovery

Analyzed existing space companies (SpaceX, Blue Origin, Virgin Galactic), studied luxury brand websites, and researched the psychology of high-value purchasing decisions. Created mood boards and defined the visual direction.

3 Days
Phase 02

Wireframing & Structure

Created low-fidelity wireframes focusing on information hierarchy and user flow. Mapped out the journey from landing to booking, ensuring each section builds anticipation and trust progressively.

4 Days
Phase 03

Visual Design

Developed the complete visual system including typography (Space Grotesk + DM Sans), color palette (deep space backgrounds with cyan/purple accents), and component library. Created high-fidelity mockups.

5 Days
Phase 04

Development & Animation

Built the site with semantic HTML, CSS custom properties, and vanilla JavaScript. Implemented the canvas star field, scroll-triggered animations, destination tabs, FAQ accordion, and spacecraft tilt effect.

7 Days
Phase 05

Testing & Refinement

Tested across devices and browsers, optimized performance, refined animations for smoothness, and ensured accessibility compliance. Made final adjustments based on feedback.

2 Days
04 — Challenges

Technical Hurdles

Every project presents unique challenges. Here are the key obstacles I encountered and how I overcame them.

01

Canvas Performance

The star field animation with 300+ particles was causing frame rate drops on mobile devices and older browsers, making the site feel sluggish.

Implemented requestAnimationFrame properly, reduced particle count on mobile via media queries, and used canvas clearing with semi-transparent overlay instead of full clear for the trail effect.

02

Visual Hierarchy Balance

With so many visual elements (stars, gradients, cards, animations), the page felt overwhelming and the key content got lost in the visual noise.

Applied restraint—reduced animation speeds, lowered opacity of decorative elements, and used strategic whitespace. Let the content breathe while keeping the cosmic atmosphere.

03

Responsive Star Canvas

The canvas wasn't resizing properly on window resize events, causing stars to appear only in part of the viewport or stretch incorrectly.

Created a dedicated resize function that updates canvas dimensions and reinitializes star positions. Added debouncing to prevent performance issues during rapid resize events.

04

Scroll Animation Timing

Elements were appearing too quickly or too slowly as users scrolled, making the reveal animations feel mechanical rather than magical.

Fine-tuned Intersection Observer thresholds and added staggered delays using CSS custom properties. Used cubic-bezier easing for more natural, physics-based motion.

05 — Features

Key Features

A deep dive into the standout elements that make this project unique.

Interactive Star Field
01

Dynamic Star Field Canvas

A custom HTML5 Canvas animation featuring 300+ particles with individual twinkle effects, parallax scrolling, and continuous regeneration. The stars respond to scroll position, creating depth and movement as users navigate.

Canvas API Animation Parallax
3D Spacecraft Interaction
02

3D Spacecraft Tilt Effect

The spacecraft image responds to mouse position with realistic 3D rotation, surrounded by animated orbital rings. This micro-interaction adds tactility and encourages exploration, making the spacecraft feel tangible.

CSS Transform Mouse Tracking Perspective
Destination Tabs
03

Dynamic Destination Tabs

An interactive tabbed interface showcasing three space destinations with smooth fade transitions. Each destination includes unique imagery, features, and pricing—allowing visitors to explore options at their own pace.

Tab Navigation Animation UX Design
Animated Counters
04

Animated Stat Counters

Numbers that count up when scrolled into view, powered by Intersection Observer. This brings data to life and creates memorable moments, especially for impressive specs like altitude and passenger capacity.

Intersection Observer Counter Animation Engagement
06 — Stack

Technology Used

Built with modern web technologies, focusing on performance and maintainability.

🌐

HTML5

Semantic Structure

🎨

CSS3

Custom Properties

⚡

JavaScript

Vanilla ES6+

🖼️

Canvas API

Star Animation

👁️

Intersection Observer

Scroll Triggers

📱

Responsive Design

Mobile First

07 — Results

Project Outcomes

While this is a concept project, here are the metrics that would matter for a real implementation.

60
FPS Animation
95
Lighthouse Score
<3s
Load Time
100%
Responsive
08 — Reflection

Key Learnings

"The best interfaces are invisible—they make complex things feel effortless and extraordinary things feel achievable."
— Personal reflection on this project
09 — Gallery

Project Screenshots

Hero Section
Spacecraft Section
Destinations
Pricing Section
Mobile View