Semantic Collapse
Where is the visual boundary for texts
between a satisfying rhythm and a stressful noise?
Everyone can input some words, then adjust some parameters of the typographic orders to choose the most uncomfortable level for self. The web will show a real-time visualization of accumulated datas, recording a collective map of semantic satiation fear.
Try the demo
#Typography
#Real-time Systems
#Critical Design
Inspiration -
Fear of repetition of words
Design Goal
- Create real-time typographic visualization system
-
Map three linguistic dimensions (repetition, density, distortion) to 3D space
-
Enable collective data contribution through web interface
- Build entirely browser-based for accessibility
Technical solutions
- Real-time Sync: Socket.io WebSocket connections for instant multi-user updates
- 3D Rendering: Plotly.js with WebGL support for interactive terrain visualization
- Sentiment Analysis: sentiment library scoring text from -5 to +5
- Deployment: Render for server hosting and automatic scaling
Development
Parameter Design
How do we measure the invisible boundary between comfort and chaos?
- Represents information overload
-
The quantity that transforms meaning into noise
- Range determined by screen capacity testing
-
Controls letter-spacing and line-height
-
Simulates claustrophobia and visual crowding
- Percentage-based for intuitive control
- Character-level transformation (skew, scale, displacement)
- Represents loss of readability and visual stability
- Mimics psychological disorientation
Visualization Evolution
-
Grid Wall: Too flat, failed to reveal patterns ❌
-
2D Scatter Plot: Couldn’t represent third parameter (repetition) ❌
- 3D Topographic Map: Repetition as elevation, plains = comfort, peaks = thresholds ✅
Different typographic effects
Final Outputs
DEMO LINKhttps://alternative-machine.onrender.com/
Feedbacks I asked some of my classmates to test this demo. Although the sample amount is still not enough, I have some interesting observations.
- Most people recorded the point at a high level distortion, including myself. However, one of my classmates Henry thought when every character is perfectly neat (distortion = 0%) , that is when it is most terrifying.
- Many people said the interface looks terrible on mobile (fair, since I didn't have time for responsive design at all), so they wanted to wait and do it on their computer later. But for me, any delay in sample collection kills the response rate. This made me realize how critical mobile adaptation is for web-based interactive prototypes, even when the project itself isn't primarily targeting mobile users.
Next steps
- Convert current relative axes to absolute coordinate values
- Adjust visualization layout to prevent 3D canvas from blocking the sample detail panel
- Continue data collection for research credibility—target 50-100 samples
- Implement responsive design for mobile
- Consider adding serif/sans-serif toggle to typography controls
References
Plotly.js Documentation
Semantic Satiation (Wikipedia)