A real-time 3D visualization of BlueSky's jetstream (firehose) feed, where each post materializes as a marble in a physics-enabled environment. The visualization provides an engaging way to observe and analyze the flow of posts on the BlueSky social network.
- Open here.
- This is a pretty preconfigured one. (And, yes! - Love and happiness still wins!)
This is animation of marbles falling in a glass vase. Each message on Bluesky fitting the filter criteria is a single marble. View the text in a marble by hovering the mouse over it.
Starting the app, no words are selected and every message gets a different color. On the right pane, counts of the different words in the jetstream are tracked. You can put a global filter at the top. By default, it's only showing 1% of all messages. Change the 'message fraction' configuration to change that.
Click one or multiple words to assign colors. Click on the color to change it. By default, all other marbles are still shown. Click the 'Only Selected Words' configuration to only show words with a color assigned. After doing this, you can likely increase the message fraction.
If the message fraction is 1, all messages going through bluesky are processed.
Happy with a visualization? The URL contains all settings! - Copy the url and share it on Bluesky mentioning #Marbles.
- Real-time Visualization: Each BlueSky post appears as a marble dropping into a transparent container
- Physics-based Animation: Uses Three.js and React Three Fiber for realistic marble physics and interactions
- Word Tracking:
- Track and visualize frequency of words in posts
- Color-code marbles based on contained words
- Custom word tracking with color assignments
- Automatic filtering of common words
- Interactive Controls:
- Filter posts by specific terms
- Adjust marble size and lifetime
- Toggle fade effects
- Control message sampling rate
- Orbit camera controls for 3D view manipulation
- Performance Statistics:
- Messages per second
- Messages per minute
- Throughput monitoring (KB/s, MB/min)
- Word frequency analysis
- URL State Management: All settings are preserved in the URL for easy sharing and restoration
- React + Vite for the frontend framework
- Three.js + React Three Fiber for 3D graphics
- React Three Cannon for physics simulation
- WebSocket connection to BlueSky's jetstream
- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173(or the URL shown in your terminal)
- Filter Box: Enter terms to filter incoming posts
- 3D Controls: Click and drag to rotate the view, scroll to zoom
- Right Panel: Access statistics and configuration options
- Marble Timeout: Control how long marbles remain visible (in seconds)
- Marble Size: Adjust the size of the marbles
- Message Fraction: Control what fraction of messages to display (0.0 - 1.0)
- Fade Effect: Toggle marble fade-out effect
- Word Selection: Track and color-code specific words
- Words appearing in posts are automatically tracked and displayed in the frequency panel
- Click on a word to assign it a color - marbles containing that word will use that color
- Add custom words to track using the input field
- Hide irrelevant words by clicking the hide button
All settings can be controlled via URL parameters:
filter: Text to filter poststimeout: Marble lifetime in secondssize: Marble size (0.0 - 1.0)fraction: Message sampling rate (0.0 - 1.0)fade: Enable/disable fade effectwords: Comma-separated list of word:color pairsonlySelected: Show only posts containing selected words
This software has been written almost entirely with Cline & Claude Sonnet.
MIT License - feel free to use and modify as needed.