PostNew Moving Image Portfolio Gallery

Overview

PostNew is a minimalist, cinematic portfolio site designed for motion designers and video producers. Its primary strength lies in its high-impact, full-bleed visual delivery, using a vertically scrolling sequence of discrete video sections rather than a traditional continuous grid. It serves as an excellent reference for builders wanting to showcase media-heavy work without the distraction of heavy UI, focusing on atmosphere and immersive navigation.

Design System

• Color Palette & Visual Hierarchy: The site uses a strict dark theme dominated by off-black and deep grey backgrounds (rgb(26, 26, 26)). Visual hierarchy is driven almost exclusively by scale and movement; content is center-aligned to maintain a theatrical focus, while navigation elements stay peripheral.
• Typography: The typography is clean and sans-serif with a prominent "PostNew, Moving Image Design" hero statement using generous kerning. Text labels for specific cases use a high-contrast white-to-light-gray palette (rgba(255, 255, 255, 0.8)) to maintain legibility against dark media.
• Page Structure & Section Flow: The layout follows a "Full-Screen Scroll" pattern. Each project occupies its own 100svh (small viewport height) section, categorized by layout variants in the HTML such as Portrait Single, Portrait Double, and Landscape Single. This allows for a curated rhythmic flow as the user scrolls through the portfolio.
• Reusable Components:
  • Blur Navigation: Nav buttons for "Index," "Feed," and "Profile" utilize a frosted glass effect (backdrop-filter: blur(20px)) and semi-transparent backgrounds to overlay media without obscuring it.
  • Section Indicators: A sidebar navigational dot system provides a physical sense of progress through the vertical sections.
  • Work Thumbnails: Nested video components with object-fit: cover and automated playback (loop, autoplay, muted) act as dynamic project previews.
• Interaction & Motion: The site implements "Lenis" for smooth scrolling, ensuring the transition between full-screen units feels fluid. Project hover states include subtle opacity shifts and localized blurs to indicate interactivity.
• Technical Implementation: Built with Framer, the site utilizes data-framer-hydrate-v2 for state management and an optimized SSR (Server Side Rendering) approach for media loading.

Use Cases

• Who should clone this pattern: Creative directors, videographers, and motion graphics studios looking for a "living portfolio" that feels like a showreel collection.
• Effective Remixes: This architecture is perfect for high-end fashion lookbooks, spatial design portfolios, or architecture firms where the visual narrative of every individual project is as important as the collective body of work.
• Remix Directions:
  • Information Density: Builders could replace the minimalist text labels with larger headlines or metadata for a more information-heavy editorial feel.
  • Brand Swap: Convert the dark rgb(26, 26, 26) theme to a high-key minimal white theme for art galleries or lifestyle brands.
• Suggested Clone Scope: A full-page clone is recommended to maintain the synchronized scrolling logic and the sidebar navigation system, which relies on the specific vertical section height (100svh).