jammyphan.com: One jar of jam, released at the edge of space,and followed all the way down.
Jammy Phan founded this studio. His own site had a different job from the studio’s: it sells the person, for partnerships, product roles and speaking, not the projects. It had to hold three trainings (information systems, business, a classical painting atelier) in one story without turning into a résumé, and it had to be the kind of thing a visitor stops and scrolls twice. We ran it the way we run a client build: three drawn directions and a reference library first, then a wide field of working concepts, then one winner iterated until it was ready to carry a domain. It is live at jammyphan.com, and every round that went into it is on this page, clickable.
- Concept · mark · type · build
- Live Aug 11, 2026
- Static HTML · Canvas 2D · no framework
- Visit live · jammyphan.com ↗
the challenge · three trainings, one person, no résumé
Three disciplines in one person. A page that had to hold all three.
The agency site and the personal site cross-link and never make the same pitch. Studio Lucky Bamboo sells projects to health, wellness and mission-based practices. jammyphan.com sells the founder himself: the systems training that makes the work hold up, the business training that makes it pay, and the fine-art practice that shapes how it looks. Put those in three columns and you have a CV. The brief asked for the opposite: one continuous story a stranger would scroll to the end.
The domain was already serving an older page-builder site that said none of this. And the first pass at replacing it did not clear the bar either. Three drawn directions, a page-builder build, three generated concepts and a hand-coded feasibility rig all went in front of the founder on one evening, and the honest reading was that nothing yet had the craft depth the brief asked for. That review is where this project actually starts.
starting conditions
| the old site | A page-builder site on the domain that carried none of the new positioning. Nothing worth preserving into the rebuild. |
| the one fixed idea | The descent. Every early concept agreed on it: a fall from a dream realm to solid ground, with the work waiting on the ground. No one had executed it yet. |
| the bar | The founder’s own words for the target: a page that makes a visitor say “wow, you made that.” Craft depth, not concept-sketch depth. |
| the rule | Nothing gets deleted. Every variation stays on disk and viewable, so a newer pass that fails can be reverted and an older idea can be reopened. That rule is why this page can exist. |
the approach · explore wide, then commit to one drop
Build the whole field to real depth. Then pick one and go deep.
A sketch cannot be judged for scroll feel, so from the second round on, every concept was a working page: a full hero-to-contact scroll with one genuinely built signature interaction, verified in a browser before the founder saw it. The rounds went like this, in order.
- Round one, the directions: three visual directions on paper and in hosted previews, a page-builder build, three generated concepts, and a hand-coded rig. The verdict set the bar for everything after.
- Round two, five full pages: Ink Descent, Nocturne / First Light, Ultramarine Bridge, Bamboo House and Emergence, each with its own built interaction: koi steering through text, a cursor-carved sand garden, a scroll-drawn bridge with an altimeter, a scrubbed life-montage reel.
- Round three, complete the cycle: the founder’s note was that the fall had to land. Four concepts were rebuilt as one continuous canvas and four new ones were added: Stratos, Core Sample, Hạ Long and Powers of Ten.
- Round four, the wildcard: the three calm finalists got a more-life pass, and the loud idea got its own page instead of being forced into theirs. Jam Drop: one jar of jam released at the Kármán line and followed to touchdown, with a mission-telemetry rail.
- Round six, the jar becomes the main character: a lab settled what the jar itself looks like, then every remaining concept was rebuilt around it with a shared escape pod and a loud-jar, calm-page rule.
- The verdict, then eighteen numbered rounds on the winner: Jam Drop for the home page, Hạ Long reworded as the About page, the rest archived and kept. Then the jar learned to sleep, wake, hide behind the letters, fall on cue, and molt out of a jam cocoon at dawn.
When the site’s claim is craft, the build has to be the proof.
The platform decision reversed twice. A no-code page builder was chosen first for speed, then a generated React build for the dev credibility it would signal. What shipped is neither: a hand-rolled static page, vanilla animation frames, Canvas 2D and inline SVG, no framework, no build step, no outside script dependencies. The reason is the site’s own argument. A page that says the founder’s systems training is why the work holds up is more believable when the page is itself a file someone could read. The rule we kept from it: if the pitch is craft, do not outsource the craft.
every round above is a working page you can open in the making-of section below. captures are shown where a concept only ever lived in a hosted preview.
the making of · every round, clickable
The making of, round by round.
Three tracks ran in parallel: the mark, the type, and the page. Each card opens something real: a portable copy of the concept as it was built, the board where a decision was made, or the capture when the original only ever lived in a hosted preview. Nothing is retouched. The captures show the founder’s own site copy as it stood at the time.
the copies open in a new tab and carry their own scroll choreography, so give each one a moment to wake up. older concepts were built as artifacts first and are shown as captures where that is all that survives.
The mark: a jar that had to survive at sixteen pixels
The name is the joke, and the joke needed a form. Six primitives were explored first, then a lab measured the one question nobody had put a number on: a jar punched into an uppercase A cannot hold at favicon size at any counter width, so the answer became two marks, a solid jar for the smallest sizes and the jar-in-A from 32 px up. Eleven lettered rounds later the straight-walled jar wore a band lid, a tint ladder, JAM and the founder’s own index line, and it went on the site.
The type: a condensed display face that had to work off Apple hardware
The headlines ride a system condensed stack, Avenir Next Condensed first, which looks right on every Apple device and falls apart everywhere else. Four open faces were set side by side against it on the site’s actual headlines and Barlow Condensed was the near-metric match: same set width, same weight color at 600, the same utilitarian signage lineage as the site’s telemetry voice. Two subset files, 18.3 KB and 18.4 KB, self-hosted and preloaded, so the fallback never flashes.
the outcome · live, checked, and carrying the studio’s work
Live on the founder’s own domain, with the studio’s clients inside it.
jammyphan.com went live on Aug 11, 2026, the domain moved off its old host the same night, and the About page grew out of the Hạ Long concept. The site now hosts case studies of the studio’s own client work in its own voice, so the two sites point at each other without repeating each other.
A production-readiness pass followed: a real document head so search tooling could verify the site, a permanent redirect from www to the bare domain that preserves deep paths, cache rules for images, and WebP with a JPEG fallback on every capture. A separate live audit then checked the whole site page by page in a clean browser: every sitemap URL answering, no broken links, images or console messages, every image with alt text and dimensions, every external link resolving.
Reduced motion is a real branch, not a switch that turns the page off: the jar is placed rather than flown, the streak and bloom layers are off, and the reveals are instant. Both modes were verified before the domain moved.
“Jam Drop will be what we run with for jammyphan.com.”
Jammy Phan, founder, at the final concept review on Aug 10, 2026
no visitor or conversion figures appear on this page. the measurement stack was wired after launch, and nothing here is claimed from it. the numbers below are build facts, each traced to a file in the studio’s own record.
at a glance · build facts, not vanity
At a glance.
every figure above traces to the studio’s own review log, task record or audit file, named in the page source next to it.
in the site’s own words
The site says it best.
One jar of jam, born at the edge of space: a hundred kilometers from first spark to first breath. The descent is the résumé.
jammyphan.com, the page’s own description line
where to go from here
Your practice has a story like this too.
This one was the studio’s own, which is the honest way to show what the process looks like when nobody is watching the budget but us. If your front door should feel like one continuous story instead of a list of services, let’s talk about what that would look like for your practice. A 30-minute conversation, not a sales call.