--- title: The Department Is Open: Building the PX PUSH Website description: A detailed case study on building the PX PUSH website, a subscription design studio for the Freedom Tech sector. The site uses a 1980s corporate aesthetic —... canonical: https://daily.dev/posts/the-department-is-open-building-the-px-push-website-aeppr64v7 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: The Department Is Open: Building the PX PUSH Website | daily.dev og:description: A detailed case study on building the PX PUSH website, a subscription design studio for the Freedom Tech sector. The site uses a 1980s corporate aesthetic —... og:url: https://daily.dev/posts/the-department-is-open-building-the-px-push-website-aeppr64v7 og:image: https://api.daily.dev/og/posts/Aeppr64V7.png og:image:alt: The Department Is Open: Building the PX PUSH Website og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # The Department Is Open: Building the PX PUSH Website **[Codrops](https://daily.dev/sources/codrops)** · 9 min read · 2 upvotes · 0 comments ## Summary A detailed case study on building the PX PUSH website, a subscription design studio for the Freedom Tech sector. The site uses a 1980s corporate aesthetic — simulated CRT monitor overlay, chrome 3D logo, cloud-flight WebGL hero, and a floppy disk pricing section — built on Nuxt 3, Three.js, GSAP with ScrollTrigger, and Lenis. Key engineering highlights include: a CSS-only CRT scanline/vignette effect in a single Wrapper.vue component, three separate Three.js scenes coordinated via a custom pub/sub lifecycle system (prepared → revealed → ready), scroll-velocity-driven logo rotation, a founder photo sequence that mimics a character-select screen, a Journal drawer styled as office paper with CSS mask punch holes, and a declarative GSAP attribute system for reusable scroll effects across the site. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do you coordinate multiple Three.js WebGL scenes with page transitions so the page doesn't reveal before scenes finish loading? Build a small pub/sub lifecycle system with states like prepared, revealed, and ready, using window events. Any component registers a promise through a registerPageTask function, and the page waits until every registered task settles or a hard timeout is reached, using Promise.allSettled. Each WebGL scene registers itself on mount, so the page waits for all scenes without connecting them directly to each other. _Developers coordinating async WebGL scenes with page transitions can find implementation patterns like this on daily.dev._ ### How can I create a CRT monitor overlay effect using only CSS and images on a website? Use a stack of fixed-position overlays: a scanline bar animating on an 8-second linear infinite loop, a repeating line pattern for CRT refresh lines, a backdrop-filter blur layer for glass bloom, and a full-screen PNG overlay scaled to 1.02 to distort and darken edges like curved monitor glass, plus an animated noise texture for restrained screen static. _Frontend developers chasing retro visual effects with pure CSS track techniques like this via daily.dev._ ### How do you keep Lenis smooth scroll and GSAP ScrollTrigger perfectly synced on one heartbeat? Tick Lenis manually off a single tickLenis hook attached to the GSAP clock, so scroll interpolation and every ScrollTrigger instance update on the same frame heartbeat rather than running on separate render loops. Smooth scroll is disabled outright on mobile in favor of native scrolling for performance and usability. _Developers wiring Lenis and GSAP ScrollTrigger together can compare approaches like this on daily.dev._ ## Similar posts on daily.dev - [Podium: Building a Website Where Running Becomes Storytelling](https://daily.dev/posts/podium-building-a-website-where-running-becomes-storytelling-axfh2vyo0) · Codrops · 18 upvotes · 1 comments - [When Community Becomes UI: Building the Website for the First Three.js Conference](https://daily.dev/posts/when-community-becomes-ui-building-the-website-for-the-first-three-js-conference-7wnsbhrf1) · Codrops · 1 upvotes · 0 comments - [The Exat Microsite: Pushing a Typography Showcase to New Creative Extremes](https://daily.dev/posts/the-exat-microsite-pushing-a-typography-showcase-to-new-creative-extremes-m12bja4fc) · Codrops · 3 upvotes · 0 comments - [Building the Maxima Therapy Website: React, GSAP, and Dabbling with AI](https://daily.dev/posts/building-the-maxima-therapy-website-react-gsap-and-dabbling-with-ai-we76kcyl9) · Codrops · 33 upvotes · 2 comments --- Tags: [#webgl](https://daily.dev/tags/webgl), [#threejs](https://daily.dev/tags/threejs), [#nuxt](https://daily.dev/tags/nuxt) [View this post on daily.dev](https://daily.dev/posts/the-department-is-open-building-the-px-push-website-aeppr64v7) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"The Department Is Open: Building the PX PUSH Website","url":"https://daily.dev/posts/the-department-is-open-building-the-px-push-website-aeppr64v7","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/the-department-is-open-building-the-px-push-website-aeppr64v7"},"datePublished":"2026-08-07T14:43:00.387Z","dateModified":"2026-09-14T09:31:35.480Z","description":"A detailed case study on building the PX PUSH website, a subscription design studio for the Freedom Tech sector. The site uses a 1980s corporate aesthetic —...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/7be1badb49880a040bbc9a7d1132d495?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/7be1badb49880a040bbc9a7d1132d495?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Codrops","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Codrops","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/codrops","url":"https://daily.dev/sources/codrops"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/the-department-is-open-building-the-px-push-website-aeppr64v7","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webgl,threejs,nuxt","timeRequired":"PT9M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Codrops","item":"https://daily.dev/sources/codrops"},{"@type":"ListItem","position":3,"name":"The Department Is Open: Building the PX PUSH Website"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/the-department-is-open-building-the-px-push-website-aeppr64v7#faq","mainEntity":[{"@type":"Question","name":"How do you coordinate multiple Three.js WebGL scenes with page transitions so the page doesn't reveal before scenes finish loading?","acceptedAnswer":{"@type":"Answer","text":"Build a small pub/sub lifecycle system with states like prepared, revealed, and ready, using window events. Any component registers a promise through a registerPageTask function, and the page waits until every registered task settles or a hard timeout is reached, using Promise.allSettled. Each WebGL scene registers itself on mount, so the page waits for all scenes without connecting them directly to each other. Developers coordinating async WebGL scenes with page transitions can find implementation patterns like this on daily.dev."}},{"@type":"Question","name":"How can I create a CRT monitor overlay effect using only CSS and images on a website?","acceptedAnswer":{"@type":"Answer","text":"Use a stack of fixed-position overlays: a scanline bar animating on an 8-second linear infinite loop, a repeating line pattern for CRT refresh lines, a backdrop-filter blur layer for glass bloom, and a full-screen PNG overlay scaled to 1.02 to distort and darken edges like curved monitor glass, plus an animated noise texture for restrained screen static. Frontend developers chasing retro visual effects with pure CSS track techniques like this via daily.dev."}},{"@type":"Question","name":"How do you keep Lenis smooth scroll and GSAP ScrollTrigger perfectly synced on one heartbeat?","acceptedAnswer":{"@type":"Answer","text":"Tick Lenis manually off a single tickLenis hook attached to the GSAP clock, so scroll interpolation and every ScrollTrigger instance update on the same frame heartbeat rather than running on separate render loops. Smooth scroll is disabled outright on mobile in favor of native scrolling for performance and usability. Developers wiring Lenis and GSAP ScrollTrigger together can compare approaches like this on daily.dev."}}]} ```