ItemDeep Message Dissolve Demo

A frontend experiment for ItemGG / ItemDeep that recreates a mobile-style chat message dissolve/delete animation using HTML, CSS, JavaScript, and Canvas.

Goal

Build a chat-like UI interaction where a message bubble:

1. starts dissolving with a directional grain/noise effect
2. fades out smoothly
3. collapses the layout cleanly (messages shift upward)

This project focuses on the animation behavior and visual feel, not backend/chat logic.

Tech Stack

• HTML
• CSS
• Vanilla JavaScript
• Canvas API (overlay effects / dissolve visuals)

Project Structure

docs/
  index.html
  style.css
  script.js
README.md

Development Plan

Phase 1

• Chat message row mock UI
• Delete trigger
• Fade + collapse (no dissolve yet)

Phase 2

• Canvas overlay
• Directional grain/noise dissolve (mobile-style feel)

Phase 3

• Fine particles / specks (small fragments only)
• Motion tuning (drift, alpha, easing)

Phase 4

• Replay / reset flow
• Timing polish
• Accessibility improvements (reduced motion fallback)

How to Run (Local)

Option 1 (Quick)

Open docs/index.html directly in your browser.

Option 2 (Recommended)

Use VS Code + Live Server:

• Open the repository in VS Code
• Open docs/index.html
• Start Live Server

Status

Scaffold initialized. Implementation starts from Phase 1.

Brand Notes

This is an ItemGG / ItemDeep UI animation experiment intended for prototyping and visual interaction design.

License

MIT (or your preferred license)