oad the homepage for the first time and, for about two seconds, you don't see the hero at all. You see a thin vertical line at the center of a black screen, and it grows — first a sliver, then it starts to glow, then the glow blooms into two colored washes spreading from either edge, and finally the wordmark fades up out of the light. Then it's gone, the real page underneath fades in, and it never happens again for the rest of your visit.
It'sbuilttobeseenexactlyonce.Showitoneverypageloadanditstopsbeinganentranceandbecomesanobstacle.
Replay it
bothmade
That's the actual sequence, unlocked from its one-per-session limit so you can trigger it as many times as you want here. On the real homepage it checks sessionStorage on mount — if a key's already set, it skips straight to "done" and renders nothing; if not, it sets the key immediately and starts a 1.9-second timer before fading itself out. Navigate to another page and back within the same tab and it stays gone. Close the tab and reopen the site and it plays again, because sessionStorage cleared with it.
One timeline, four keyframes
typescript
animate={{ scaleY: [0.1, 0.5, 1, 2], boxShadow: [ '0 0 0 rgba(255,255,255,0)', '0 0 20px rgba(255,255,255,0.4)', '0 0 60px rgba(255,255,255,0.6)', '0 0 120px rgba(255,255,255,0.9)', ], }} transition={{ duration: 1.4, times: [0, 0.3, 0.6, 1] }}
Both arrays — scaleY and boxShadow — share the same times array, so at 30% through the animation the line is exactly half-height and lightly glowing, at 60% it's full height with a strong glow, and by 100% it's overshot to twice its container height with the glow nearly maxed out, which is what actually reads as light overexposing the frame rather than a line just getting taller. The two side blooms and the wordmark are separate motion elements with their own delayed transitions, layered on top so they arrive after the line already has weight.
Why not skip it for return visitors entirely
sessionStorage was the deliberate middle ground between two worse options. A cookie or localStorage-based "seen it once, ever" would mean a visitor who leaves and comes back a week later never sees the studio's own entrance again — the thing exists to make a first impression, and a week is still a first impression if enough time has passed to forget it. Showing it on literally every page navigation within one visit would train people to wait it out or, worse, to bounce before it finishes. Once per browser session is the one setting where it functions as a title sequence instead of a tax.