First Hour

Inspiration

We've all seen the footage of people standing frozen in the street during an earthquake where the families are arguing about which road to take while a wildfire closes in, a father on his phone searching "what to do during a flood" while the water rises. The tragedy isn't the disaster. It's the 20 minutes lost to panic that could have been a plan.

We wanted to build something that removes every excuse. Something a family could generate in 30 seconds, share with their household, and forget about until the day they need it most.

That moment of helplessness is what FirstHour was born from.

What it does

FirstHour generates a personalized, timed disaster survival protocol for any household for any of 8 major disaster types: Earthquake Flood Wildfire Hurricane Tornado Tsunami Chemical Spill Power Outage

In under 30 seconds, you tell FirstHour your disaster type, your environment, and your household makeup, as well as how many adults, children, elderly members, pets, and any special medical needs. FirstHour then produces a structured 60-minute protocol broken into three urgency phases: Critical (0–5 min) Urgent (5–15 min) Important (15–60 min) Each with personalized, prioritized action steps tailored to your exact situation.

How we built it

For the experience, we wanted the website itself to communicate urgency and care through design. We drew heavy inspiration from cinematic editorial sites typographic drama and scroll-driven storytelling.

For the engine, we built a plan generation system in TypeScript that maps disaster type × environment × household composition to a curated step library. Each of the 8 disaster types has phase-specific step templates that are then filtered and ordered based on what the user told us about their household. The whole thing runs client-side—no server, no waiting, no account required to generate.

The UI is built in React 18 with Tailwind CSS and Framer Motion, with a custom BorderGlow card system written in vanilla JavaScript that creates a magnetic edge-glow effect on every card without triggering a single layout reflow.

Challenges we ran into

Getting the animations to feel truly seamless was harder than we expected. GSAP, Lenis, and Framer Motion all have their own relationship with the browser's paint cycle, and getting them to share one rAF loop without fighting each other took real debugging. The Lenis ScrollTrigger proxy integration in particular required careful ordering—initializing in the wrong sequence and smooth scroll breaks the pinned sections entirely.

The BorderGlow system was another interesting problem. The React component we were inspired by (BorderGlow from react-bits) doesn't translate directly to a single-file HTML context. We had to rebuild the entire physics system in vanilla JavaScript using CSS custom properties and a ::before pseudo-element with a mask, so the glow appears only on the card border rather than filling the card itself. Getting the mask composite to work cross-browser without visual artifacts took several iterations.

This website had to be revolutionary, as it could one day save lives gracefully!

Accomplishments that we're proud of

The loader is the moment we're most proud of. When the counter hits 100 and the screen literally splits in half to reveal the hero behind it, that moment consistently makes people say "wait, what?" out loud. That's the feeling we were chasing from day one, and it landed.

And practically, the plan generator actually works. You can put in a real scenario two adults, one child, a cat, an urban apartment, and an earthquake and get back a protocol that a trained emergency manager would largely agree with. That's the part that matters most.

What's Next for First Hour

We also want to build a true offline PWA, a service worker implementation, so your saved plan is accessible with zero signal, zero battery drain, the moment you need it. A QR wallet card is a great start, but a phone that works without data is better.

Most disaster deaths happen in hour one. We fix that. For free.

Built With

• css3
• github
• html5
• javascript
• tailwindcss
• typescript
• vscode