Quick summary
Traplord Noir is a neon-noir scroll-world portfolio. It’s a cinematic drift through a rain-slick, neon-lit Bangkok district, generated scene by scene and stitched into one continuous night flight. It’s moody and atmospheric, built dark from the ground up.
Who this template is for
Built dark from the ground up. It’s for brands and portfolios whose register is nocturnal rather than corporate.
- Creatives and studios whose work has a nocturnal, cinematic register that a light layout would flatten
- Music, fashion, and nightlife brands who need atmosphere carried by the site rather than described by it
- Anyone needing a reference for a dark-theme scroll world where the interface survives a saturated background
What problem this template solves
Scroll-driven cinematic sites usually take a 3D artist, a motion designer, and weeks of iteration. This build gets the same effect from generated film and hand-written code.
- True 3D fly-throughs price out most projects before the first storyboard is drawn
- Video-scroll sites tend to stutter, because the scrub, the seams, and the loading are all hard to get right
- Studios who want this look have few reference builds showing how the legs are generated and joined
What you get with this template
You get a continuous night drift through a rain-slick neon district, generated scene by scene and stitched into one unbroken flight.
- A cohesive neon-noir world where every generated scene shares one palette and one weather condition
- A single camera flight scrubbed on scroll, with no cuts anywhere in the drift
- A dark-themed interface tuned so the neon does the talking
Page sections overview
| Section | Purpose |
|---|---|
| Night scene chain | Chain generated night scenes into one continuous drift |
| Rain-slick surface direction | Hold wet reflective ground across every scene as the unifying element |
| Neon palette discipline | Restrict the emissive palette so the world reads as one district |
| Dark-theme interface overrides | Retune every interface surface for a saturated dark background |
| Scroll-bound drift | Bind the camera drift to scroll so the visitor controls the pace |
Design and branding system
The identity is rain-slick Bangkok after midnight: deep blue-black streets, restricted neon, and reflections doing most of the lighting.
- A near-black blue base with a restricted neon accent set, so saturated light reads as deliberate rather than noisy
- Reflection treated as the primary light source, tying the emissive signage to the ground plane in every scene
- Light-on-dark typography with contrast and weight retuned for saturated backgrounds
Mobile and speed optimization
The film is pre-rendered video, so the cinematic look costs almost nothing on mobile hardware. The phone only ever scrubs a video.
- Pre-rendered legs mean there’s no WebGL budget on mobile: scroll position simply drives video time
- Posters and compressed masters keep the first frame fast even on cellular connections
- Caption and interface layers reflow independently of the film, so small screens lose no content
How this template helps you convert
A scroll film turns a pitch into an experience. The structure keeps the visitor moving toward the ask without ever feeling sold to.
- The opening frame is the hook: motion begins with the first scroll tick, so engagement pays off right away
- Each beat lands one message before the camera moves on, so the story accumulates instead of blurring
- By the final beat, the visitor has flown the whole world, so the closing call to action feels earned
Other information about this template
A few notes on this build.
- It’s dark by design and won’t convert cleanly to a light theme without redirecting the whole world
- The film is pre-rendered video, so it stays smooth on mobile with no WebGL budget
- City, palette, and copy are all rebuilt around your brand; the chaining and dark-theme system carry over
- It’s the library’s reference build for handling a dark-theme scroll world properly
How it works
Generated night scenes are chained into a single unbroken camera flight and scrubbed on scroll. The dark interface is tuned so the neon does the talking.
Screenshots
Captured from the live build, section by section, exactly as the template renders.
