Corridor is a transit-oriented design landing page built for urban planning and architecture practices. It targets transit authorities, institutional developers, and municipal planning departments. The template features an asymmetric 60/40 grid, a cinematic scroll sequence moving from station platform to aerial walkshed, and a lead generation form anchored around a compelling station-area intake flow.
by Rocket studio
Loading preview…
Quick summary
Corridor is a single-page landing page template for transit-oriented design practices. It opens with an animated isometric cityscape, walks visitors through a cinematic scroll sequence from station interior to aerial view, and closes with a focused lead generation form. The design follows a Luxe Minimal aesthetic with an iridescent color system built for desktop-first professional audiences.
Who this template is for
This template is purpose-built for architecture and urban planning practices that work at the intersection of transit infrastructure and neighborhood development. It speaks directly to B2B professional service providers whose clients operate at city scale.
Transit-oriented development design firms presenting services to institutional clients
Metropolitan transit authority project managers and real estate directors evaluating design partners
Municipal planning departments and institutional developers seeking TOD expertise for rail corridor projects
What problem this template solves
Many architecture and urban planning practices struggle to communicate the full scope of transit-oriented development work. A generic portfolio page cannot convey the layered complexity of designing from platform to neighborhood. Corridor solves this.
Visitors arrive without a mental model of what station-area design actually covers
There is no clear path from "I find this interesting" to "I want to start a project"
The practice's range, from wayfinding to aerial walkshed planning, never lands in one coherent story
What you get with this template
This template delivers a complete, production-ready landing page structured around a cinematic narrative arc. Every section is designed to carry the visitor forward, from first impression to form submission, without friction.
An animated hero with an isometric SVG cityscape that assembles itself around a transit node in real time
A four-part cinematic scroll sequence covering station interior, public plaza, podium retail, and aerial walkshed
Theme
Luxe Minimal
Creative direction
Cinematic Sequence
Color system
AI Iridescent
Style
Asymmetric Grid (60/40)
Direction
Lead Generation
Page Sections
Animated Isometric SVG Hero
Four-part Cinematic Scroll Sequence
Dual-path Lead Generation Form
Asymmetric 60/40 Editorial Grid
Iridescent Interactive States
Arc-style Split Footer
Related questions
Who is this landing page template designed for?
What does the lead generation form collect from visitors?
Can the colors and fonts be customized to match my practice's brand?
Is this template suitable for a boutique urban design studio?
Does the animated hero need a third-party library to run?
A lead generation section with a dual-path intake form for project inquiries and a downloadable TOD density calculator
Feature list
This template includes purpose-built components that serve the specific storytelling and conversion needs of a transit-oriented design practice.
Animated Isometric Hero
The hero section features a self-drawing SVG cityscape that builds outward from a central transit node. Rail lines appear first, then building volumes, then street trees and human figures along pedestrian desire paths. The iridescent gradient acts as the illustration's light source, casting violet-to-cyan reflections across rendered glass facades. The animation completes in approximately five seconds before the tagline "We design where the doors open." lands on screen.
Cinematic Scroll Sequence
Four scroll-linked sections move the visitor through a single tracking-shot narrative. The journey begins at the station interior, pushes through the fare gates into the public plaza, rises to podium retail and mid-rise housing, then pulls to an aerial view revealing the quarter-mile walkshed as a glowing radius on a dark map. Parallax depth layers and a continuous iridescent gradient thread connect every scale transition without a visible seam.
Asymmetric 60/40 Grid Layout
The page uses a deliberate asymmetric grid that gives editorial weight to primary content while keeping supporting detail visually subordinate. This structure creates a sense of forward momentum and mirrors the directional energy of transit design itself.
Dual-Path Lead Generation Form
The intake form appears after the aerial walkshed section, positioned precisely when visitors have absorbed the full scope of the practice. The primary path collects the transit corridor name, project phase (feasibility, entitlement, or design development), and a work email. The secondary path offers a downloadable transit-oriented development density calculator gated behind the same email field.
Iridescent Hover and Scroll Accents
Interactive states use a luminous violet-blue gradient that shifts across hover events and scroll-triggered accents. Magnetic call-to-action buttons respond to cursor proximity. A scroll-linked gradient thread runs through the full page, reinforcing visual continuity across sections.
Editorial Footer Layout
The footer follows a split pattern with the logo and tagline anchored on the left and navigation links on the right. This clean, editorial finish maintains the Luxe Minimal tone through to the last pixel of the page.
Page sections overview
Section
Purpose
Animated Hero
Introduces the practice with a self-assembling isometric transit cityscape and primary tagline
Station Interior Sequence
Showcases materials, wayfinding systems, and architectural ceiling height at platform scale
Public Plaza Sequence
Presents hardscape design, public activation strategy, and micromobility dock integration
Podium Retail Housing
Illustrates the mixed-use program layer of podium retail and mid-rise residential above
Aerial Walkshed Map
Reveals the quarter-mile pedestrian radius as a glowing overlay on a dark contextual map
Lead Generation Form
Captures project inquiries and email leads through a dual-path station-area intake form
Split Footer
Closes the page with logo, tagline, and navigation in an editorial Arc-style split layout
Design & branding system
The visual identity is built around a Luxe Minimal theme executed through an iridescent color system. Every color decision references light refracting through curved architectural glass, keeping the palette synthetic, opalescent, and precise.
Deep graphite (#1A1A2E) as the primary background, pearl (#E8E4F0) for content panels, and warm platinum (#D4CFC9) for body text on dark fields
A luminous violet-blue gradient (#7B6CF6 to #56CCF2) that activates on hover states, scroll-triggered accents, and as a continuous light thread across the cinematic sequence
Fraunces serif display type paired with DM Sans for body copy, creating an editorial contrast that feels authoritative and approachable at once
Mobile & speed optimization
The template is desktop-first by design, reflecting the professional workstation context in which transit authority directors and institutional developers review design proposals. The layout and interaction model prioritize that primary experience.
Server Components handle all static sections to keep the initial page load clean and fast
Client Components are scoped to animation-heavy areas including the SVG hero, parallax scroll layers, and interactive hover states
The 60/40 asymmetric grid and scroll-linked animations are calibrated for large-screen legibility without degrading the experience on smaller viewports
How this template helps you convert
The conversion path is structured to match the visitor's cognitive journey. By the time the lead form appears, the visitor has already seen the full scope of what the practice delivers.
The animated hero creates an immediate, memorable first impression that holds attention for the five seconds it takes the cityscape to assemble, giving the tagline a precisely timed landing moment.
The cinematic scroll sequence builds cumulative authority by moving through every scale of transit-oriented design work, from platform materials to aerial walkshed, so the visitor understands the practice's full range before they reach the form.
The dual-path intake form lowers the barrier to engagement by offering both a direct project inquiry and a useful downloadable resource, capturing leads at two different levels of buyer readiness.
Other information about this template
This template is part of a broader collection of architecture and urban design templates built for B2B professional service contexts. It is well suited for practices entering the transit-oriented development market or repositioning an existing urban design practice around rail corridor work.
The template supports North American urban planning contexts with English-language copy and implicit USD project framing
Animation intensity is high, using SVG path drawing, Ken Burns parallax, text mask reveal, a scroll-linked gradient thread, and a marquee ticker component
The interactivity level is medium, with hover shimmer states, magnetic call-to-action button behavior, and parallax depth layers that reward careful desktop browsing
This template can serve as the primary outreach surface for practices pursuing joint-development deals, air-rights parcels above rail yards, or zoning overlay consulting engagements
