Skip to content

feat: Telegram dissolve example - #30

Merged
blazejkustra merged 1 commit into
mainfrom
feat/telegram-dissolve
Sep 5, 2026
Merged

feat: Telegram dissolve example#30
blazejkustra merged 1 commit into
mainfrom
feat/telegram-dissolve

Conversation

@blazejkustra

Copy link
Copy Markdown
Owner

Problem

The example app had no "sample a real view into a pixel grid" effect. Telegram's delete-for-everyone dissolve is the canonical one, and it needed a convincing Telegram chat around it.

Approach

Dark Telegram group-chat mock with long-press menu and confirm sheet. The bubble's content layer is snapshotted with react-native-view-shot, bound as a ShaderView texture, and a fragment shader sweeps it into particles on a smooth invertible wind field with a bounded cell gather.

Tests

  • Verified on the iPhone 17 Pro simulator (iOS 26): long-press → Delete → Delete for everyone dissolves the bubble, list reflows, empty state restores messages.
  • Frame-by-frame comparison against the reference recording: background fade, left→right sweep, up-left drift, ~1.1 s total.
  • tsc and eslint clean for the new files (3 pre-existing-style inline-style warnings).
  • Not verified: Android (texture load relies on fetching a file:// URI), real devices, WGSL validated with naga only.

Screenshots

@blazejkustra
blazejkustra force-pushed the feat/telegram-dissolve branch 13 times, most recently from 4e13d73 to e5cb731 Compare September 5, 2026 15:28
Telegram-style "delete for everyone" in the example app: a dark-theme group
chat mock (long-press context menu, reactions, confirm sheet) where the
deleted bubble is snapshotted with react-native-view-shot, bound as a
ShaderView texture and dissolved by a fragment shader into particles that
sweep left to right, drift up-left and fade. The snapshot and canvas are
prepared on long-press so the swap is seamless; the lifted message settles
back before dissolving and the remaining rows slide into place with a
Reanimated layout transition.

Claude-Session: https://claude.ai/code/session_018M1xxfxyazPGpU5RxkXyW9
@blazejkustra
blazejkustra force-pushed the feat/telegram-dissolve branch from e5cb731 to 24da569 Compare September 5, 2026 15:53
@blazejkustra
blazejkustra merged commit 79064c4 into main Sep 5, 2026
1 of 2 checks passed
@blazejkustra
blazejkustra deleted the feat/telegram-dissolve branch September 5, 2026 15:53
blazejkustra added a commit that referenced this pull request Sep 5, 2026
React Native types View as a function component, so useRef<View> and a
View-typed parameter have no measureInWindow; use ComponentRef<typeof View>.
Unblocks the repo-wide typecheck that has failed on main since #30.

Claude-Session: https://claude.ai/code/session_01MYgJDumHFGETXWCh37fS7V
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant