Devo · portfolio

Nehru

Live

Overview

Nehru is an atmospheric interactive experience that introduces a historical voice through a cinematic landing flow. It focuses on mood, pacing, and restrained interaction instead of dense UI so the portrait and narration can do the heavy lifting.

What It Is

A narrative-first web experience built around a portrait reveal, a short guided intro, and a transition into the main conversation.

Problem

Historical or documentary-style web pages often feel static, which makes the opening moment forgettable and weakens the emotional connection.

How It Works

The page opens with an animated portrait sequence, a brief intro panel, and a continue flow that moves the user from presentation into the main content at a deliberate pace.

Why It Stands Out

Nehru stands out because it uses restraint as the design language. The interface is quiet, the typography is formal, and the experience relies on timing and composition rather than heavy interaction.

Repository Structure

Intro/landing logic handles the portrait reveal and skip flow

Narrative sections control the transition into the main experience

Motion and animation layers guide pacing and attention

Shared UI components keep the presentation consistent

Installation

git clone https://github.com/arnabjena007/nehru.git
cd nehru
npm install
npm run dev

Local Run

npm run dev
Open the local development URL shown in the terminal

Flags

Skip Intro: jumps past the opening sequence

Continue: enters the main experience

Code Snippets

Intro state

const [introDone, setIntroDone] = useState(false);

const continueToStory = () => {
  setIntroDone(true);
  setTimeout(() => scrollToNarrative(), 300);
};

Portrait reveal

useEffect(() => {
  const timer = setTimeout(() => {
    setPortraitVisible(true);
  }, 150);

  return () => clearTimeout(timer);
}, []);

Setup Notes

Built as a browser experience with a strong visual focus

Best viewed on a larger screen to preserve the composition

Use the intro flow first, then continue into the main narrative

Key Features

Portrait-led intro sequence

Skip and continue flow

Narrative pacing and motion

Quiet editorial typography

Minimal interface with strong composition

Stack used

Next.js

TypeScript

TailwindCSS

For more cool projects, visit my GitHub.