SalvadorEnter the city
A layered pixel-city hero introduces the five members and sets the playful visual language before the first scroll.
Frontend case study · Interactive fan experience
NewJeans: Pixel Journey
A single-page journey that turns the Get Up EP into a responsive pixel-art world of member profiles, album storytelling, and scroll-led interaction.
Role
Solo designer and frontend developer
Focus
Art direction, responsiveness, and motion
Status
Finished and live
Rendering
Statically prerendered
Visual walkthrough
The experience across sections and screens
Desktop hero
The opening scene combines the navigation, title, five characters, colored trails, and city environment into one layered composition.
Member system
A reusable profile-card structure keeps five distinct identities consistent while preserving each member's color and character.
Album journey
The Get Up artifact introduces the release before the six-track quest log completes the editorial progression.
Mobile hero
Characters receive dedicated mobile positions while the primary action and visual hierarchy remain clear.
Mobile member card
The profile becomes a focused vertical record without losing facts, personality, color, or decorative statistics.
The brief
Make album information feel like a world to explore
A conventional fan page could have presented the group and EP as a collection of biographies and track names. Instead, the project treats the content as a short visual journey with a beginning, progression, and closing scene.
The central frontend challenge was maintaining that art direction across viewport sizes. Five independently positioned characters, layered trails, navigation, copy, and scenery all needed to remain legible without reducing mobile to a smaller desktop composition.
The result is a focused frontend showcase built around responsive composition, reusable content structures, and motion that supports the journey rather than blocking it.
Experience flow
Three scenes, one continuous journey
Meet the members
Shared RPG-inspired cards organize five profiles, personality details, representative colors, and decorative statistics.
Explore Get Up
The album becomes a collectible artifact followed by a complete six-track journey and a nighttime closing scene.
Frontend architecture
Static content with one focused animation boundary
Most of the experience remains server-rendered. Member and track data live in typed arrays and render through reusable components, while one client component owns browser-based animation. This keeps the visual ambition from turning the entire page into client-side JavaScript.
01Typed member and track data
02Server-rendered content components
03Statically imported visual assets
04Client-only SceneMotion component
05GSAP context and media queries
06Statically prerendered route
Next.jsReactTypeScriptGSAPScrollTriggerTailwind CSS
Motion system
Movement creates pacing, not friction
Scroll-led reveals
Cards, statistics, album artwork, and tracks enter in a controlled sequence as the journey progresses.
Responsive distances
GSAP media queries adapt motion behavior instead of applying desktop movement values to every screen.
Automatic cleanup
Animation contexts and ScrollTrigger handlers revert when the component or media conditions change.
Reduced motion
Motion only runs when the visitor has not requested reduced movement, with CSS animation disabled as well.
Responsive direction
Mobile is recomposed, not compressed
The hero characters receive dedicated tablet and mobile positions. Navigation switches to a native disclosure pattern, profile cards stack naturally, and the album artifact and track list move from editorial columns into a readable vertical flow.
Desktop
Layered horizontal compositions, floating navigation, and side-by-side album storytelling.
Mobile
Purpose-built character placement, compact navigation, and a focused single-column reading order.
Final result
A finished frontend experience with a clear point of view
Pixel Journey demonstrates how a content-only page can still feel product-like through art direction, component structure, responsive behavior, and coordinated motion. The live result is statically rendered and available across desktop and mobile.
Project note
This is an unofficial creative fan project. NewJeans, Get Up, member imagery, and related visual assets belong to their respective rights holders. The interface design and frontend implementation were created independently by Salvador Palacios.
Explore the live experience (opens in a new tab)