Skip to content

playground: match gallery transition, glass configurator sidebar

jedmund requested to merge jedmund/playground-transition into main

Created by: jedmund

Summary

  • Match the BentoHomeScreen → playground push animation to the BentoHomeScreen → playground gallery push. The inner GenerativeBackground inside PlaygroundScreen was cross-fading on top of the ambient shader at the AppView level; removing it lets the ambient shader stay continuous during the push, the same as TrackDetailScreen / PlaygroundGalleryScreen / LessonScreen.
  • Replace the floating glass chevron back button with a shared topRow (BackChip + centered PLAYGROUND · TOOL mono label), matching the pattern used on every other pushed detail screen.
  • Swap the configurator SidePanel's thinMaterial background for .cardStyle (the shared glassEffect(.regular, ...) wrapper) so the sidebar speaks the same liquid-glass language as cards, chips, and the hero band. Title is now uppercase mono to match the top-row title convention.
  • Make the configurator sidebar sit below the top safe area + 8pt. Applied at the caller (PlaygroundScreen) rather than inside SidePanel because adding extra padding directly around the .cardStyle'd view broke the glass rendering.

Test plan

  • Push into a playground from the home rail and into the gallery from "See all". Transitions should look identical (ambient shader continuous, content slides/fades in).
  • Confirm the back chip + PLAYGROUND · {TOOL NAME} title render at the top of every playground.
  • Open the configurator sidebar for a keyboard, oscillator, shaper, and exercise playground. Glass chrome should be visible, uppercase title present, top edge at safe area + 8pt below the status bar.
  • Edge-swipe back + back chip both return to home cleanly.

Merge request reports

Loading