✨ feat(markdown): implement streaming animation for markdown blocks#475
Merged
✨ feat(markdown): implement streaming animation for markdown blocks#475
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Reviewer's GuideImplements a streaming character-by-character reveal animation for markdown blocks by introducing a queue-based block state machine, a configurable rehype plugin for per-character spans with staggered animations, and wiring it into StreamdownRender with new styling, while removing the old global animated flag and simplifying block rendering. Sequence diagram for streaming markdown rendering and animationsequenceDiagram
actor User
participant StreamdownRender
participant useStreamQueue
participant rehypeStreamAnimated
participant DOM
User->>StreamdownRender: provide_markdown_children
StreamdownRender->>StreamdownRender: useMarkdownContent
StreamdownRender->>StreamdownRender: remend_content
StreamdownRender->>StreamdownRender: marked_lexer_to_BlockInfo
StreamdownRender->>useStreamQueue: useStreamQueue(blocks)
useStreamQueue-->>StreamdownRender: getBlockState charDelay queueLength
loop for_each_block
StreamdownRender->>useStreamQueue: getBlockState(index)
useStreamQueue-->>StreamdownRender: BlockState
alt state_is_streaming
StreamdownRender->>rehypeStreamAnimated: configure(baseCharCount charDelay)
else state_is_animating
StreamdownRender->>rehypeStreamAnimated: configure(baseCharCount0 charDelay)
else state_is_revealed
StreamdownRender->>rehypeStreamAnimated: not_used
end
StreamdownRender->>DOM: render_StreamdownBlock_with_plugins
end
rehypeStreamAnimated->>DOM: wrap_chars_in_span_stream_char
DOM-->>User: sees_character_by_character_reveal
Class diagram for streaming markdown rendering componentsclassDiagram
direction LR
class StreamdownRender {
+children string
+render()
+useMarkdownContent(children)
+useMarkdownComponents()
+useMarkdownRehypePlugins()
+useMarkdownRemarkPlugins()
+useStreamQueue(blocks)
}
class StreamdownBlock {
+children string
+render()
}
class BlockInfo {
+content string
+startOffset number
}
class BlockState {
<<enumeration>>
revealed
animating
streaming
queued
}
class UseStreamQueueReturn {
+charDelay number
+queueLength number
+getBlockState(index)
}
class useStreamQueue {
+useStreamQueue(blocks)
-revealedCount number
-minRevealedRef number
-prevBlocksLenRef number
-timerRef Timeout
+getBlockState(index)
}
class StreamAnimatedOptions {
+baseCharCount number
+charDelay number
}
class rehypeStreamAnimated {
+rehypeStreamAnimated(options)
-hasClass(node, cls)
-wrapText(node)
-shouldSkip(node)
}
class styles_animated {
<<style>>
+stream_char opacity0
+stream_char animationFadeIn
}
StreamdownRender --> StreamdownBlock : renders
StreamdownRender --> BlockInfo : computes_blocks
StreamdownRender --> useStreamQueue : uses
StreamdownRender --> rehypeStreamAnimated : configures_plugins
StreamdownRender --> UseStreamQueueReturn : receives_state
useStreamQueue --> BlockInfo : manages_queue_for
useStreamQueue --> BlockState : returns
rehypeStreamAnimated --> StreamAnimatedOptions : configured_by
styles_animated --> rehypeStreamAnimated : targets_stream_char
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
Member
|
👍 @Innei |
commit: |
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've left some high level feedback:
- The
countCharshelper is duplicated in bothStreamdownRenderanduseStreamQueue; consider extracting this into a shared utility to keep the character-counting logic consistent and easier to maintain. - There are now two sources of character delay (
STREAM_CHAR_DELAYinStreamdownRenderand the computedcharDelayfromuseStreamQueueused instaggerPlugins); it would be clearer to unify these so the streaming and animating states derive delay from a single, well-defined configuration. - In
rehypeStreamAnimated, you are building inlinestylestrings foranimation-delay; if more style properties are added later this string-based approach can get brittle—consider using a structuredstyleobject (or merging with existing styles) to avoid accidentally overwriting other inline styles.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The `countChars` helper is duplicated in both `StreamdownRender` and `useStreamQueue`; consider extracting this into a shared utility to keep the character-counting logic consistent and easier to maintain.
- There are now two sources of character delay (`STREAM_CHAR_DELAY` in `StreamdownRender` and the computed `charDelay` from `useStreamQueue` used in `staggerPlugins`); it would be clearer to unify these so the streaming and animating states derive delay from a single, well-defined configuration.
- In `rehypeStreamAnimated`, you are building inline `style` strings for `animation-delay`; if more style properties are added later this string-based approach can get brittle—consider using a structured `style` object (or merging with existing styles) to avoid accidentally overwriting other inline styles.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
- Introduced `useStreamQueue` hook to manage streaming state and delays for markdown blocks. - Enhanced `StreamdownRender` to utilize streaming animations with staggered effects. - Updated styles for animated streaming characters. - Added `rehypeStreamAnimated` plugin to handle character-level animations in markdown rendering. This update improves the user experience by providing a more dynamic and engaging way to display markdown content. Signed-off-by: Innei <tukon479@gmail.com>
…components - Refactored the `StreamdownBlock` and `StreamdownRender` components for improved readability and maintainability. - Removed unnecessary memoization in `StreamdownBlock`. - Streamlined the use of `useEffect` and `useMemo` hooks in `StreamdownRender` to enhance performance. - Ensured consistent handling of previous character counts and stream offsets. This refactor lays the groundwork for future enhancements in markdown rendering. Signed-off-by: Innei <tukon479@gmail.com>
- Introduced `revealed` option in `rehypeStreamAnimated` plugin to control character visibility during streaming. - Updated `StreamdownRender` to utilize stable plugin references for improved performance. - Added utility functions for deep comparison of plugins to prevent unnecessary re-renders. - Enhanced styles for revealed characters to ensure smooth transitions. This update improves the markdown rendering experience by providing more control over streaming animations and optimizing component performance. Signed-off-by: Innei <tukon479@gmail.com>
Member
|
❤️ Great PR @Innei ❤️ |
github-actions bot
pushed a commit
that referenced
this pull request
Mar 3, 2026
# [5.2.0](v5.1.1...v5.2.0) (2026-03-03) ### ✨ Features * **markdown**: Implement streaming animation for markdown blocks, closes [#475](#475) ([2b3d230](2b3d230))
Member
|
🎉 This PR is included in version 5.2.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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
Commits
86812c94✨ feat(markdown): implement streaming animation for markdown blocksd6ed6e0e♻️ refactor(markdown): simplify StreamdownBlock and StreamdownRender componentsTest plan
Summary by Sourcery
Add per-block streaming animation for markdown rendering with dynamic timing and simplified components.
New Features:
Enhancements: