CH3CH3.com
Interactive 3D molecular visualization with a glassmorphic skin and a Discourse forum bolted on.
CH3CH3 is the home of an interactive Three.js molecular visualizer on a glassmorphism PHP site, paired with a fully integrated Discourse forum at forum.ch3ch3.com. The interesting plumbing is the cross-domain auth bridge — a single login flows from the main site into the forum via SSO so the user never sees two login prompts. Vanilla JS front, PHP 8 back, Tailwind for the chrome, Lucide for icons.
- PHP 8
- JavaScript
- Three.js
- Tailwind CSS
- PostCSS
- Discourse
- Lucide
- nginx
CH3CH3.com is built around a single visual idea — an interactive 3D molecule rendered to a Three.js scene that drives the homepage and quietly recurs through the rest of the site as a glassmorphic motif. Click the logo and the molecule reshapes; scroll and the parallax layers settle around it. Underneath the visual layer is a more serious plumbing problem: a Discourse forum at forum.ch3ch3.com that needs to share authentication state with the main site without making users log in twice.
The cross-domain auth bridge
- Single sign-on into Discourse via the SSO-provider protocol — the main site is the identity source, Discourse trusts it on a shared secret, and the login round-trip happens transparently the first time the user clicks a forum link.
- Forum-side session detector running in a hidden iframe on the main site: it asks the forum "are you logged in?" without leaking the cookie, then flips the main UI's "join the discussion" button into the user's avatar + a deep link.
- Session save-back when the user logs into the forum directly — the forum tells the main site about the new session via a postMessage handshake, so both surfaces stay in sync.
The molecule
Three.js scene with custom shaders for the bond-glow effect.
A small logo-randomizer.js module rerolls the
structure on click; the orb navigation in the footer is the
same scene at a different camera angle. Theme toggle hot-swaps
materials so dark mode genuinely changes the rendering rather
than just re-tinting CSS. There's no React, no bundler — just
Tailwind compiled by PostCSS into dist/output.css
and a directory of plain JS modules.
How it's hosted
nginx with the 1panel control surface, PHP 8 for backend
logic and the SSO endpoints, Discourse running on a sibling
subdomain. Project lives at /srv/ch3ch3; build
is npm run build-css and a reload, no Docker, no
pipeline — the whole site is files-on-disk plus a forum and
a couple of cron jobs.
Straight from the source
The project's own README.
Rendered in place — every link, image, and code block carried over from the repo. The page below is what a contributor would see opening the project for the first time.
CH3CH3.com Documentation
This directory contains all project documentation for the CH3CH3.com website and forum integration.
📁 Directory Structure
docs/
├── README.md # This file - documentation index
├── handoff.md # Project handoff documentation
├── FORUM-AUTH-SETUP.md # Forum authentication setup guide
├── discourse-smtp-options.md # Email/SMTP configuration options
├── forums-include.md # Forum integration details
└── todo/ # Active todo lists
├── vendors-todo.md # Vendor system implementation plan
├── forums-todo.md # Forum setup and integration tasks
└── todo.md # Main development todo list
📚 Documentation Categories
Setup & Configuration
- handoff.md - Complete project overview and technical specifications
- FORUM-AUTH-SETUP.md - Step-by-step authentication integration setup
- discourse-smtp-options.md - Email configuration for Discourse forum
Integration Guides
- forums-include.md - Forum integration implementation details
Development Planning
- todo/ - Directory containing all active todo lists and implementation plans
- vendors-todo.md - Comprehensive vendor system specifications (300+ lines)
- forums-todo.md - Forum setup, configuration, and integration tasks
- todo.md - Main website development and feature implementation
🔒 Security Note
All documentation files in this directory are blocked from web access via nginx configuration. They are only accessible through the terminal/SSH for development purposes.
🚀 Quick Start References
- Forum Authentication: See
FORUM-AUTH-SETUP.md - Vendor System: See
todo/vendors-todo.md - Project Overview: See
handoff.md - Development Tasks: See
todo/todo.md
📋 Current Status
- ✅ Forum authentication integration complete
- ✅ User profile system implemented
- 🔄 Vendor system in planning phase (see todo/vendors-todo.md)
- ✅ Documentation organized and secured
Last updated: August 6, 2025
Gallery
The full set.
Build something like this
Want a tool like this for your shop?
We've shipped this kind of thing before. Twenty-minute intro call, no slides.