Tragwerk home page on a computer: agency for concepts, the flickering wordmark tragwerk. on scratched paper
Tragwerk on a phone: agency for concepts, keywords and wordmark on paper

Agency website with a second world for Frankfurter Straßen

Tragwerk

The website of a Frankfurt agency for subculture, nightlife and urban space, designed in the style of its own project plan: scratched paper, capitals, a flickering wordmark. Plus a second world at night for the partner platform Frankfurter Straßen.

For
Agency for subculture, nightlife and urban space, Frankfurt
Role
Concept, design, build
Period
since October 2026
Status
In progress

Where it started.

Tragwerk works from the Bahnhofsviertel on concepts for subculture, nightlife and urban space. The design already existed: in the project plan the agency built itself. The website was to look and sound exactly like that, not like a template. Then there is Frankfurter Straßen, an independent platform Tragwerk works with as a partner, which needs its own presence on the same site.

What was built.

  • Their project plan as the design

    Paper with crosshair scratches, page numbers, justified capitals: the site takes over the visual language Tragwerk developed itself. One type family carries both brands, condensed and lower case for Frankfurter Straßen.

  • Two worlds on one site

    Tragwerk stands on paper, Frankfurter Straßen at night. Both share navigation and contact, yet stay recognisable as independent partners.

  • Frankfurt as an effect, not decoration

    A split-flap board like the one at the main station shows a night plan instead of a timetable, the wordmark flickers as a WebGL signal, the pointer is the crosshair from the logo. Anyone who reduces motion sees everything still.

The Frankfurter Straßen area of the site at night: large distorted wordmark and the platform’s claim in lower case
The second world: Frankfurter Straßen at night, in its own condensed type and in lower case.

What it will do.

  • A site in the agency’s own style, not from a template
  • Two brands with their own world and one shared navigation
  • Motion with care: at most three flashes a second, and it can be switched off
  • As strong on a phone as on a computer

What is in it.

Services

  • Concept
  • Web design
  • Build
  • Motion and WebGL
  • Contact form

Technology

  • Next.js
  • WebGL without a library
  • Split-flap board
  • Reduced motion respected