Reviving 80s Aesthetics: The PX PUSH Website Design Journey

PX PUSH, a design studio aligned with the Freedom Tech movement, embodies a unique blend of rapid project execution and a somewhat ironic logo. The design of their website mirrors this operational ethos: structured and accountable, yet intriguingly deadpan. The platform aims to serve the often-overlooked sectors in the design space, reflecting their identity through a nostalgic lens reminiscent of 1980s corporate culture.

The site features various design elements inspired by the past, including bureaucratic motifs and old office equipment. One of its signature aspects is the CRT monitor effect, which creates an immersive experience for visitors, giving a sense of peering through a vintage screen. This design choice dictates that every aspect of the user interface echoes aesthetic choices from the late '80s, particularly asking the question: What would this look like on a screen from 1988?

Technical Stack

• Nuxt 3 — This framework serves as the backbone for the application, managing server-side rendering (SSR) and file-based routing.
• GSAP + ScrollTrigger — These libraries power the numerous scroll-triggered animations and parallax effects throughout the site, organized via a reusable attribute system.
• Lenis — A smooth scrolling library that synchronizes with GSAP, excluding mobile devices for a native scrolling experience.
• Three.js — This library supports multiple custom scenes, enabling dynamic visual features such as a chrome logo and a cloud-based hero scene.
• @nuxt/content — The site utilizes this module to draw content from markdown files during both build and request time.
• Splitting.js — A useful tool that breaks down headings and paragraphs into distinct lines and words to facilitate animation effects.

The CRT Effect Explained

Creating an authentic CRT effect involved implementing a specialized component dubbed Wrapper.vue. This component uses fixed-position overlays to simulate a vintage screen, featuring synchronized scanlines, background blurring reminiscent of old glass displays, and an overall color tone that darkens the edges of the viewport. This layered design emulated the unique look of 1980s monitors, steering clear of modern minimal trends.

The site’s color palette draws heavily from nostalgic references, with primary blues mirroring the infamous Blue Screen of Death and grays akin to the plastic casings of classic office devices. Additionally, nostalgic visuals, like a cloud-flight scene designed to evoke feelings akin to old operating-system wallpapers, captivate users, while a floppy disk icon humorously serves as a purchasing symbol in the pricing section.

Three.js Implementations

The website showcases three distinct Three.js scenes, each designed for specific interactive elements. The first scene features a 3D representation of the PX PUSH logo, which dynamically alters in size and rotates based on scroll speed—a playfully engaging feature. This logo transitions seamlessly from the hero section to the header as users navigate.

In the second scene, a meticulously crafted cloud-flight animation draws the eye, utilizing a custom shader to enhance depth and realism. The scene also comes with an interactive element, where hovering over certain text accelerates the visual experience, cleverly engaging the visitor. Lastly, the floppy disk model showcases dynamic material properties, bringing an added layer of interactivity as the viewer scrolls through the pricing information.

Interactive Features and Engineering Challenges

Connecting multiple WebGL scenes posed significant engineering challenges. The site implements a lifecycle management system that ensures each scene is fully loaded before any transitions occur. Utilizing custom promises, the system allows for smoother page interactions and minimizes the risk of displaying incomplete visuals.

Moreover, the About page cleverly integrates photography with scroll dynamics, enabling a fascinating rotation effect reminiscent of old character-selection screens. Each founder features a unique QR code, crafted using the same aesthetic tokens as the site’s overall design theme, further enhancing connectivity.

Design Elements and Final Touches

The Journal section diverges from traditional article navigation by incorporating a sliding drawer combining the visual cues of office paper with neat punch-hole detailing. Each article maintains its own URL and SEO metadata, ensuring user experience remains intact while innovatively presenting the content format.

Unique Error Messages

The site’s error pages creatively capture the nostalgia of vintage software by emulating a classic Blue Screen of Death. These designs use monochromatic features and interactive prompts to engage users humorously, providing both clarity and style.

Conclusion: A Modern Nostalgic Experience

What stands out in this project is the seamless blending of retro aesthetic elements with contemporary web technologies. The design not only appeals to nostalgia, but it also showcases an effective and thoughtful integration of modern frameworks like Nuxt, Three.js, and GSAP, ensuring that each component serves as part of a cohesive user experience. Expect to see more brands adopt similar strategies for engaging storytelling through design.

Credits

The PX PUSH website's design, concept, and development were brought to life by Stud Creative House in collaboration with the PX PUSH team and led by director Lewis Webber.