Retro Meets Modern: Insights into the PX PUSH Website Design

PX PUSH is not just another design studio; it's a subscription service built to cater to Freedom Tech—a movement advocating for decentralization and open economics in the design space. In a field often dominated by traditional design studios, PX PUSH offers a unique voice, and its website embodies the business's core principles of structure, accountability, and a touch of deadpan humor.

The design narrative is steeped in 1980s corporate culture. From the choice of bureaucratic jargon to references of office equipment, every detail is a nod to the era when typography and design were heavily influenced by office aesthetics. The site frames every interaction through the lens of an outdated CRT monitor, forcing visitors to engage with the content as if it stems from a bygone technology era.

This retro influence raises an interesting design question: “What would a site look like on a screen from 1988?” This central theme guides every aspect of the design, ensuring a cohesive experience that ties past visual language to present-day web technology.

Technical Stack Highlights

• Nuxt 3 – at the core of the website, this framework handles everything from server-side rendering to static site generation.
• GSAP + ScrollTrigger – these tools drive scroll-based reveals, parallax effects, and hover states through a custom attribute system.
• Lenis – this smoother scrolling implementation is manual, ensuring that scrolling remains consistent and fluid by syncing with GSAP’s clock.
• Three.js – utilized for various dynamic graphical elements including an extruded chrome logo and an animated cloud flight in the site’s hero section.
• @nuxt/content – powering the Journal with markdown articles, built and accessed at runtime without any external CMS.
• Splitting.js – breaks down headings and text into manageable segments, enhancing the animation capabilities of the site.

The CRT Experience

Crafting the CRT monitor effect proved vital to replicating the nostalgic aesthetics. A single component handles the entire simulation, layering various visual effects for an immersive experience. This includes simulating scanlines, refresh patterns, a subtle backdrop blur for depth, and a vignette overlay that darkens the screen edges.

This approach not only taps into familiar aesthetics but also employs simple yet effective CSS techniques to maintain the retro feel across the entire site. Bright, bold color choices reflect those early computing days—a bright blue reminiscent of the infamous Blue Screen of Death juxtaposed against muted grays that recall the plastic surfaces of retro hardware.

Three Distinct Three.js Scenes

To engage users dynamically, PX PUSH utilizes multiple Three.js scenes tailored to different site segments. The first features the PX PUSH logo, skillfully extruded from SVG, showcasing chrome materials and animated according to scroll behavior.

The cloud-flight hero scene comprises around 8,000 cloud layers, enhanced with custom shaders to create depth and visual intrigue. An interactive element allows users to affect the scene's speed by hovering over certain words, inviting playful engagement.

The third scene—a rotating floppy disk—serves a clever metaphor for purchasing design packages, further intertwining nostalgia with utility. This dynamic model responds to scrolling, providing a kinetic connection to the pricing section.

Rotating Founders Like Character Select

The About page takes on a unique flair by presenting founder portraits similarly to an old-school character-select screen—each founder is photographed from multiple angles, and users can scroll to reveal different perspectives. This intersection of animation and real-life imagery creates a memorable interaction akin to games of the past.

Additionally, each founder's profile integrates a QR code linking to their personal sites, styled cohesively with the overall aesthetic of the page.

Seamless Page Transitions

A significant challenge lay in syncing the multiple WebGL scenes with the overall page transitions. The solution involved crafting a lifecycle system that could coordinate between scenes. This allowed the page to delay its full reveal until all elements are ready, ensuring no awkward blank screens disrupt user experience.

const pendingTasks = new Set()

export function registerPageTask(task) {
  const pendingTask = Promise.resolve(task).catch(() => {})
  pendingTasks.add(pendingTask)
  pendingTask.finally(() => pendingTasks.delete(pendingTask))
  return () => pendingTasks.delete(pendingTask)
}

export function waitForPageTasks() {
  return Promise.allSettled([...pendingTasks])
}

Reimagining the Journal

The Journal page departs from traditional layouts, opting for a drawer reminiscent of office paper. Textured designs not only enhance the visual experience but also create an interactive feel for article access without losing SEO benefits.

Unique Error Pages

Error pages on the PX PUSH site embrace the nostalgia of early computing with their Blue Screen of Death visuals, combining humor and function by guiding users back to the homepage with an interactive quip.

Thematic Cohesion Across Design Elements

The intention behind PX PUSH wasn't merely to replicate a bygone web interface but to transpose the essence of 1980s corporate design into a modern framework, employing tools like Nuxt, Three.js, and GSAP. This aesthetic consistency ensures that each interactive element feels like part of a unified experience, contributing to a distinct identity that speaks to both nostalgia and innovation.

Credits

The execution of this ambitious design vision came from the creative minds at Stud Creative House, led by Lewis Webber in close collaboration with the PX PUSH team.