Add Stream & Chunk teaching components with card flip mechanics #4
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…l variant - Move StreamPullPrototype to src/components/playground/ - Create StreamPushPullPrototype with cloud push button - Push adds chunks to top (with purple gradient cloud button) - Pull consumes from bottom (existing green button) - Both prototypes use polished visual style matching EffectNode aesthetic
- Stack cards with 12px overlap (like playing cards) - Number bottom to top: 1 at bottom, 5 at top - Initialize queue by adding items one at a time (150ms intervals) - Bottom card pulses to show next pull target - Cards stack with z-index depth effect - 80x80px cards with larger text (2xl)
- Create ChunkCardStack pattern component in src/components/patterns/ - Array order: [newest/top, ..., oldest/bottom] - Pull from bottom (oldest), push to top (newest) - Initialize by adding 1→5 sequentially to build proper stack - Both StreamPullPrototype and StreamPushPullPrototype now use shared component - Export from patterns/index.ts
Border now rotates with the card during flip animation instead of staying fixed
Card scales to 1.15x and lifts 20px on z-axis during flip, creating a lifted-off-deck feel
…down Scale: 1 → 1.2 → 1 (20% larger at peak) Z-lift: 0 → 30px → 0 (lifts forward then returns) Duration: 600ms total for smooth lift and settle
Scale and z-lift now animate on every flip (forward or back) instead of only when flipping to front
Add key and initial props to force Motion to re-run scale/z keyframes on each flip direction change
- Cards start face-down (mystery back) - Flip to reveal value when pulled - Uses StackedCard component with flip support - Consumed rail shows face-up cards (CardFaceFront) - 800ms pull sequence (600ms flip + 200ms buffer)
- Cloud button pushes new face-down cards to top - Pull lever flips bottom card and moves to consumed - Consumed rail shows face-up cards - Both push and pull use StackedCard components - 800ms pull sequence with flip animation
Prevents race condition where card could be pulled twice before state updates
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
New Components
Card Components 🃏
Stream Prototypes
Atomic Patterns
Playground Page
New
/playgroundroute showcasing all atomic visual patterns in isolation:Visual Improvements
Technical Fixes
getServerSnapshottouseSyncExternalStorefor SSR/playgroundindependent of main appNext Steps
This is a draft PR to showcase the visual pattern library and card flip mechanics before integrating into production examples.