Website + shopCommunity & commerce2025–26

Hero Church

The Hero Church is a members’ community with its own line of chocolate and gummies. We built the site, the shop, the blog, and Psibyl, the church’s AI guide.

Client
The Hero Church
What we did
Creative directionFrontend UI/UXInteractiveEngineering
herochurch.org
Hero Church homepage illustrated world
Hero Church on a phone

The product, in motion

The brief

A storybook brand with a real checkout behind it, age attestation included. The world had to feel endless and the shop had to feel simple.

Design system

Palette

Hero gold

#F5C950

Magic purple

#2A1B4D

Purple mid

#4A2E7A

Lavender

#C8B8E0

Cream

#F5EEDE

Shop ink

#1A1030

Type

HeadlinesRevue
BodyAvenir
AccentMikela

Inside the build

01

Fall into the world

On the phone, the homepage is one continuous film that plays as you scroll.

How: Frame-exact video decoding with WebCodecs, scrubbed by scroll position.

02

Doors that are journeys

Tap a door and pass through it. The film’s first frame is the hub, its last frame is the world you chose.

How: Seamless pass-through films stitched to the page on either side.

03

A diorama on desktop

Layered scenes drift at different depths with color dissolves between worlds.

How: GSAP and Lenis parallax layers, split-text and masked reveals, lazy-loaded motion.

04

Psibyl, the guide

Press her and she answers questions about the church and the products.

How: Kit AI chat embedded as a character; gold four-point-star cursor trail on canvas.

Hero Church community section

Technology

  • Next.js 16
  • React 19
  • GSAP
  • Lenis
  • WebCodecs
  • Stripe
  • Supabase
  • Kit AI
  • Cloudflare

Next project

GuardNIL U

The operating system for sports families: incentive contracts, an AI coach, academics, and payouts parents approve.

Want one like this?

Tell us about the business. You leave the first call with a direction and a written estimate.