Y2KBlog

Y2KBlog

Y2KBlog

05

Creative Development

Client

Alina

Y2KBlog turns a nostalgic scrapbook into an interactive web experience. Independently recreated in React from a published Framer design, it combines handwritten typography, layered imagery, music and playful details.

Y2KBlog turns a nostalgic scrapbook into an interactive web experience. Independently recreated in React from a published Framer design, it combines handwritten typography, layered imagery, music and playful details.

y2kblog.vercel.appVisit website

The original project’s desktop scrapbook, independently recreated in code. The public live demo uses fictional content and neutral media.

Y2KBlog · 1/5

Project Focus

React · TypeScript · Vite · Motion · Custom CSS · HTML audio · Vercel

The Challenge

Preserve the reference’s character across desktop, tablet and mobile while turning its camera, CD and other decorative objects into usable controls.

Preserve the reference’s character across desktop, tablet and mobile while turning its camera, CD and other decorative objects into usable controls.

The Solution

A custom React and TypeScript implementation brings the collage to life with camera screens, draggable stickers and startup animation. Journal pages, a persistent music player, photo galleries, an editable bio and a browser-local guestbook expand the experience.

A custom React and TypeScript implementation brings the collage to life with camera screens, draggable stickers and startup animation. Journal pages, a persistent music player, photo galleries, an editable bio and a browser-local guestbook expand the experience.

What we built

The features behind the experience.

/001

A tactile scrapbook

Interactive camera screens, draggable stickers and an animated flip phone turn decorative objects into controls.

/002

Music across pages

A persistent audio player supports favorites and track selection. The public demo includes self-composed synth loops.

/003

A personal journal

Searchable entries, an editable bio and a browser-local guestbook create a connected experience.

/004

Made for smaller screens

Dedicated desktop, tablet and phone layouts retain the layered composition, with keyboard controls and reduced-motion support.

The approach

How the experience comes together.

01

Study the reference

Inspect the published Framer design, its composition, typography and behavior across screen sizes.

02

Recreate and expand

Build an independent React and TypeScript application, then connect the camera, music, journal and gallery interactions.

03

Prepare the public showcase

Capture approved desktop and iPhone views. Deploy a separate version with fictional content and neutral media on Vercel.

Try it yourself

Explore the live website.

Explore the interactive scrapbook, journal, photo album and synth player. This public concept demo uses fictional text and neutral media; personal changes stay in your browser.

y2kblog.vercel.appOpen website ↗

The interactive preview is available on mxlx.framer.ai and mxlx.studio. You can open the live website directly from this preview.

A closer look.

04 views
01The music room — a CD-inspired player, track list and favorites.
02The journal — layered notebook pages and searchable entries.
03iPhone homepage — the dedicated mobile scrapbook composition.
04iPhone gallery — photo filters and a responsive album.
Y2KBlog · 1/5
The Outcome

A working frontend showcase connecting expressive visuals with practical interactions. The approved screenshots show the original project version. The public demo uses fictional text, original abstract artwork and self-composed synth loops while demonstrating the same interface and functionality.

A working frontend showcase connecting expressive visuals with practical interactions. The approved screenshots show the original project version. The public demo uses fictional text, original abstract artwork and self-composed synth loops while demonstrating the same interface and functionality.

Start Your Project

If you’re ready to build a website that supports real, measurable business growth, let’s talk.

Man Portrait

Milo Kopper

Founder & CEO

We respond within 24 hours

Subscribe for new notes on design and useful websites.

Start Your Project

If you’re ready to build a website that supports real, measurable business growth, let’s talk.

Man Portrait

Milo Kopper

Founder & CEO

We respond within 24 hours

Subscribe for new notes on design and useful websites.

Start Your Project

If you’re ready to build a website that supports real, measurable business growth, let’s talk.

Man Portrait

Milo Kopper

Founder & CEO

We respond within 24 hours

Subscribe for new notes on design and useful websites.