No headings found on page

ATLAS • SOLO BUILT

A new way to explore what to watch

A new way to explore what to watch

A new way to explore what to watch

ROLE

Design Engineer

TECH STACK

Next.js

TypeScript

Tailwind CSS

Framer Motion

CONTRIBUTIONS

Product Design

Interaction Design

Frontend Development

API Integration

STATUS

Live

Explore Atlas

TL;DR

Finding something to watch often means endless scrolling, repetitive recommendations, and switching between platforms to find the right movie or show. I designed, coded, and launched Atlas, an interactive discovery experience that transforms a familiar poster grid into an infinite canvas. With freeform navigation, search and filters, detailed title information, and a visual watchlist, Atlas makes movie discovery feel more like exploring than browsing a feed. Built from scratch as a solo project, it brought product design, frontend development, and interactive motion together in a live product.

Context

I love movies and shows, but finding something to watch often meant jumping between platforms, scrolling through endless feeds, and still not finding anything.

That made me wonder:

What if discovering titles felt less like searching and more like exploring?

What if discovering titles felt less like searching and more like exploring?

BEFORE

So I built Atlas. I took the familiar movie poster grid and reimagined how people could move through it, turning a simple browsing experience into an interactive space for discovery.

I designed the experience, built the interface, engineered the interactions, solved the performance problems, and shipped Atlas myself.

Problem

Movie discovery had become a list.

Movie discovery had become a list.

Movie discovery had become a list.

Most streaming platforms organize movies into rows, grids, and recommendation feeds. That works when I already know what I want, but it doesn't work as well when I simply want to explore.

  1. Too much scrolling

  1. Too much scrolling

Finding something interesting often meant going through endless rows of content.

  1. Repetitive recommendations

  1. Repetitive recommendations

Recommendations could feel like variations of the same titles instead of something new to explore.

  1. Limited exploration

  1. Limited exploration

Traditional feeds leave little room to wander or discover something unexpected.

  1. Repetitive work broke momentum

  1. Repetitive work broke momentum

Finding a movie could mean jumping between different platforms and streaming services.

I didn't want to build another recommendation feed. I wanted exploration itself to be the experience.

Design

I turned a familiar grid into an infinite canvas.

I turned a familiar grid into an infinite canvas.

I turned a familiar grid into an infinite canvas.

Most movie platforms arrange posters in rows that you scroll through. I wanted to keep the familiarity of a poster grid while changing how people move through it.

Atlas places movies on an infinite canvas inspired by tools like Figma and Google Maps. Instead of scrolling vertically through a feed, you can drag in any direction, explore titles, and discover something unexpected.

INFINITE CANVAS

Making the canvas feel infinite.

Making the canvas feel infinite.

Making the canvas feel infinite.

My first approach duplicated a grid of movie posters. It created the illusion of endless space, but the same posters eventually appeared again.

I replaced it with a spiral coordinate system where each movie gets a unique position radiating outward from the center. This lets the canvas expand without obvious repetition or visible edges.

const ring = Math.ceil((Math.sqrt(n + 1) - 1) / 2)
const position = n - (2 * ring - 1) ** 2
 
const side = Math.floor(position / (2 * ring))
const offset = position % (2 * ring)
 
// Every movie gets a unique position
// radiating outward from the center.
return getCoordinate(ring, side, offset)

Keeping exploration simple

Keeping exploration simple

Keeping exploration simple

An open canvas still needs ways to find specific titles. I added search for movies, shows, and filmographies, along with filters for genre, language, year, and rating.

An open canvas still needs ways to find specific titles. I added search for movies, shows, and filmographies, along with filters for genre, language, year, and rating.

SEARCH & FILTER

Selecting a poster opens an Inspector with cast, trailers, streaming options, and ratings from multiple sources, keeping useful information close without interrupting exploration.

INSPECTOR PANEL

Making the experience feel alive

Making the experience feel alive

Making the experience feel alive

I wanted the interface to respond to the movies themselves. Atlas samples colors from movie artwork and uses them as ambient lighting, subtly changing the atmosphere as you explore.

ADAPTIVE INSPECTOR PANEL

Saving a movie also has its own interaction. The poster follows a curved path toward the watchlist, making the action feel physical rather than like a simple button click.

ADD TO WATCHLIST

Engineering

When movement is the experience, performance matters.

When movement is the experience, performance matters.

When movement is the experience, performance matters.

As the canvas grew, panning started to drop frames. Since movement is central to Atlas, slow interactions would undermine the entire experience.

I rebuilt the rendering approach so Atlas only renders visible cells and preloads content in the direction the user is moving. This keeps navigation responsive without rendering the entire canvas at once.

Adapting the canvas for mobile.

Adapting the canvas for mobile.

Adapting the canvas for mobile.

Atlas started as a desktop-first experience, but touch introduced new constraints. Without hover, poster sizes and gestures needed to work differently.

Rather than creating a separate experience, I adapted the interactions for touch while keeping the same spatial logic across mouse, trackpad, and mobile.

MOBILE VIEW

Understanding usage without unnecessary tracking.

Understanding usage without unnecessary tracking.

Understanding usage without unnecessary tracking.

I also wanted to learn how people explore, search, save movies, and return to Atlas without collecting more data than necessary.

I built privacy-first analytics without cookies, persistent identifiers, autocapture, session recording, or full IP storage. This gives me useful signals for improving the product while keeping data collection limited.

Learnings

The interface wasn't supporting the product. The interface was the product.

The interface wasn't supporting the product. The interface was the product.

The interface wasn't supporting the product. The interface was the product.

Building Atlas taught me that movie discovery isn't just about bringing information together. It's also about how people move through it.

The canvas encourages exploration. Search and filters provide control. The Inspector adds depth, while motion and performance make the experience feel natural.

I didn't just build another way to browse movies. I built a different way to explore them.

I didn't just build another way to browse movies. I built a different way to explore them.

ASHIK MATHEW THARAKAN

PRODUCT DESIGNER & ENGINEER

LINKEDIN

GITHUB

DRIBBBLE

BEHANCE