Case Study: Decibel 12 (db12fans.com)

Building the Ultimate Digital Home for Seattle Seahawks Fan Culture

Executive Summary

Decibel 12 is an independent, high-performance web platform designed specifically for Seattle Seahawks supporters ("12s"). Built to bridge the gap between stadium energy, community identity, and modern interactive web features, the platform combines real-time game-day tracking, interactive AI score predictions, custom Coast Salish-inspired superfan character branding, and community-driven content vaults.

The Challenge

Seattle Seahawks fans are globally recognized for setting world-record decibel levels, yet fan engagement tools are often fragmented across generic social media platforms, temporary group chats, and outdated forums.

The primary objectives for Decibel 12 were:

Establish an Authentic Digital Identity: Root the design language in authentic Pacific Northwest and Coast Salish artistic geometry rather than generic sports templates.

Streamline Game-Day Utility: Create a centralized hub for local watch spots, tailgate directories, and live countdowns ahead of the season opener.

Engage Community-Driven Content: Build secure, moderated photo vaults and interactive recognition systems (Fan & Pet of the Week, Hall of Fame) without relying on cluttered ad networks.

Deliver Fast, Frictionless Auth: Implement seamless passwordless authentication (Magic Links) that feel modern and trustworthy.

Key Features & Platform Architecture

1. Game Day Hub & Countdown Engine

Real-time countdown clock synced to kickoff schedules.

Interactive directory featuring local PNW sportsbooks, SODO tailgate basecamps, and partner venues (Touchdown's Sports Bar, Hatback Bar & Grille).

2. 12s Game Day Photo Vault & Moderation

Community image repository for tailgates, custom outfits, and fan pets.

Tech: Client-side NSFWJS filtering (TensorFlow.js) for automated pre-upload image moderation, backed by Supabase Storage and dynamic likes counter triggers.

3. Fan Authorities & Hall of Fame

Dedicated tribute section honoring iconic superfans and community legends (Patti "Mama Blue" Hammond, Lorin "Big Lo" Sandretzky, Save Our Seahawks, Blue Thunder Drumline).

Integrated community support features to drive awareness and fundraising for local fan figures facing medical recovery.

4. Interactive Engagement: "12s vs. The Machine AI"

Weekly score prediction module allowing fans to lock in game outcomes and compare football IQ against predictive analytics models on the "Wall of Sound" leaderboard.

5. Superfan Character Branding Services

Dedicated portal ("Build Your Superfan Identity") connecting fans with custom character design, gear sculpting, and formline artwork concepting for stadium outfits.

Tech Stack & Execution

Domain Technology / Tool Frontend Framework Next.js / React / TypeScript / Tailwind CSS Backend & Storage Supabase (PostgreSQL, Realtime Auth, Storage Buckets) Email Delivery Resend (Authenticated Custom SMTP Domain) Image Moderation NSFWJS / TensorFlow.js Content Production CapCut Desktop / Envato Elements / Rive Deployment Vercel

Results & Impact

Launch Readiness: Fully deployed ahead of the season opener against New England, complete with an automated multi-channel social media launch kit.

Brand Integrity: Custom Coast Salish formline artwork and action-green visual identity created a distinct platform identity recognized across local fan networks.

Zero-Friction Onboarding: Fully branded email delivery via custom Resend SMTP routing, eliminating spam flags and delivering single-click magic link logins.

Check it out

This feels like a strong example of translating a community’s energy into a digital system. The bold visual language gives the platform a clear identity while the content structure keeps it useful.

First project built on Framer, a fragrance brand concept called NOIRÉ. I learned the platform through a tutorial covering positioning, responsive structure, components, and 3D transforms, then applied those techniques to build my own original concept from scratch: brand name, content, and the tilted 3D-card hero layout.

#WebDesign #Framer #Animations #3D transforms

Strong first Framer build, and picking a tilted 3D-card hero to learn on was ambitious in the right way. One thing worth checking early: those 3D transforms and layered cards can get heavy on mobile, so test the tilt and hover states on a mid-range phone and simplify if the...