Animated Chat Screen

A looped old-phone chat UI built with React and Motion.

A Playwright capture used as the Blender texture for Вайбер[1]. Track by Вялый Джо[2].

  • React
  • Motion
  • Animated UI
  • Playwright capture
  • Blender texture

The visible photos were rebuilt as a small public-safe candid selfie series.

Prompt View image generation prompt
Create a series of 3 consistent photos of an adult European woman in a cozy bedroom at night.
She has dark wavy shoulder-length hair, a warm light-to-medium skin tone, soft natural makeup, and a relaxed, playful expression.
She is wearing an oversized lavender off-shoulder knit sweater that feels casual, soft, and cozy.
The mood should feel intimate but tasteful, suitable for a public portfolio case study.
Lighting should feel like a candid low-light bedroom snapshot with soft direct flash, subtle grain, and purple-pink ambient lighting in the room.
The setting should include a bed, soft bedding, and a lived-in bedroom atmosphere with a few subtle decor details.

Generate 3 variations with slightly different poses and expressions:
1. Over-the-shoulder playful glance toward the camera.
2. Sitting casually on the bed with one hand near her hair and a soft smile.
3. Sitting on the bed from a top-down angle, leaning back slightly with both hands on the bed at her sides, looking up at the camera.

The overall feeling should be cozy, candid, feminine, playful, and non-explicit.
Avoid nudity, lingerie emphasis, fetish styling, explicit sexual content, censorship, and pixelation.

Generated candid selfie series

Generated candid selfie used as the first chat photo attachment.
A candid selfie pass that keeps the chat beat readable without using the original suggestive image.
Generated candid selfie used as the second chat photo attachment.
A second frame in the same casual photo language, made so the loop can carry more than one image beat.
Generated candid selfie used as the third chat photo attachment.
A safer replacement image that still feels like a private phone message inside the promo texture.

Showing Generated candid selfie used as the first chat photo attachment.

  1. v1.1

    Study refresh

    The portfolio version kept the loop mechanism but rebuilt the visible content for a public study.

    Changed
    • Renamed the study to Animated Chat Screen.
    • Rebuilt the photo attachments as a public-safe generated image pass.
    • Added the image prompt disclosure, copy action, carousel, references, and release log.
    • Standardized the preview surface across the Design Lab shelf, study page, and standalone component route.
  2. v1.0

    Animated phone screen

    A looped React and Motion chat screen made for the old phone in the Вайбер promo.

    Output
    • A browser recording that could become the moving screen layer in the reel and cover.

Source material and tools that shaped the study.

  1. Вайбер — Вялый ДжоPublished promo reel that used the phone-screen animation.
  2. Вялый Джо on InstagramArtist profile.
  3. Вайбер release linksStreaming link hub for the track.
  4. Vantaa UndergroundMusic collective site.
  5. ChatGPT Images 2.0OpenAI image generation release used for the replacement photo set.