# ramonszo/zuck.js **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/ramonszo-zuck-js).** _How this analysis was created: the description and tags below were written by an AI model that read this project's README and public documentation pages; stars, license and language come straight from the GitHub API. The model does not read the source code._ 3,728 stars · 313 forks · TypeScript · MIT ## Links - GitHub: https://github.com/ramonszo/zuck.js - Homepage: https://ramon.codes/projects/zuck.js/ - awesome-repositories: https://awesome-repositories.com/repository/ramonszo-zuck-js.md ## Topics `facebook` `instagram` `media` `modal` `react` `slider` `snapchat` `stories` `story` `viewer` `whatsapp` `zuck` ## Description zuck.js is a JavaScript UI library used to build JSON-driven story viewers and timelines. It provides a touch-based interface for rendering sequences of full-screen content, enabling the integration of social media style story layouts into web applications. The library features a customizable theme engine that allows for different visual styles and hardware-accelerated 3D transition effects, such as cube transitions, when switching between story sets. It employs mobile UI emulation to replicate native application experiences through fullscreen layouts and gesture-based navigation. The toolkit includes systems for programmatic story management and timeline rendering, using structured JSON data to map content to the UI state. It handles touch interactions to trigger navigation events and utilizes viewport-adaptive layouts to toggle between embedded previews and fullscreen modes. ## Tags ### User Interface & Experience - [Social Media Story Viewers](https://awesome-repositories.com/f/user-interface-experience/social-media-story-viewers.md) — Implements a system for rendering social media style story sequences driven by JSON data. ([source](https://on.ramon.codes/kj6R)) - [Gesture Navigation](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries/gesture-navigation.md) — Translates touch and click gestures into directional triggers for navigating through story items. - [Event-Driven Component Interfaces](https://awesome-repositories.com/f/user-interface-experience/event-driven-ui-frameworks/event-driven-component-interfaces.md) — Provides a programmable API with custom events to trigger UI transitions and state updates. - [Story Timelines](https://awesome-repositories.com/f/user-interface-experience/interactive-timeline-visualizations/story-timelines.md) — Enables the construction of interactive full-screen content sequences using JSON and customizable themes. - [JSON-Driven Dashboards](https://awesome-repositories.com/f/user-interface-experience/json-driven-dashboards.md) — Renders sequences of user stories and media items based on an external JSON configuration. - [Touch Navigation Interfaces](https://awesome-repositories.com/f/user-interface-experience/navigation-components/touch-navigation-interfaces.md) — Implements a touch-optimized interface for navigating temporary content using swipe-to-advance functionality. - [Dynamic Rendering Updaters](https://awesome-repositories.com/f/user-interface-experience/dynamic-content-updaters/dynamic-rendering-updaters.md) — Manages the dynamic rendering of temporary visual updates and stories via a JavaScript interface. - [Viewport Mode Toggles](https://awesome-repositories.com/f/user-interface-experience/full-screen-viewport-layouts/responsive-layout-switches/viewport-mode-toggles.md) — Allows switching between embedded preview layouts and mobile-style fullscreen viewing modes. - [Story Theme Engines](https://awesome-repositories.com/f/user-interface-experience/story-theme-engines.md) — Provides a customizable theme engine for applying visual styles and 3D transitions to story displays. ### Content Management & Publishing - [Story Content Management](https://awesome-repositories.com/f/content-management-publishing/story-content-management.md) — Provides an interface for programmatically adding, updating, and removing stories and items within a timeline. ([source](https://cdn.jsdelivr.net/gh/ramonszo/zuck.js@master/README.md)) ### Data & Databases - [Data-Driven State Management](https://awesome-repositories.com/f/data-databases/data-driven-state-management.md) — Uses structured JSON data to map story sequences and content directly to the UI state. ### Graphics & Multimedia - [Story UI Libraries](https://awesome-repositories.com/f/graphics-multimedia/javascript-timeline-libraries/story-ui-libraries.md) — Acts as a JavaScript library for creating social media style story timelines and fullscreen content viewers. - [Story Layout Compositions](https://awesome-repositories.com/f/graphics-multimedia/social-media-content-creation/story-layout-compositions.md) — Integrates mobile-style story layouts into websites to display user-generated content. ### Web Development - [Gesture Handling](https://awesome-repositories.com/f/web-development/gesture-handling.md) — Processes touch interactions to trigger custom events for navigating through story content. ([source](https://ramon.codes/projects/zuck.js/)) - [Theme Styling](https://awesome-repositories.com/f/web-development/cross-platform-styling/theme-styling.md) — Decouples visual layouts from logic via a theme engine that applies predefined style configurations. - [Mobile Viewport Emulation](https://awesome-repositories.com/f/web-development/mobile-viewport-emulation.md) — Forces the interface into a mobile-style fullscreen layout to mimic native application experiences. ([source](https://ramon.codes/projects/zuck.js/)) - [3D Transition Effects](https://awesome-repositories.com/f/web-development/page-transition-controls/3d-transition-effects.md) — Implements hardware-accelerated 3D cube transitions for navigating between different story sets. ### Mobile Development - [Web-Based Mobile Emulation](https://awesome-repositories.com/f/mobile-development/mobile-ui-layout-construction/web-based-mobile-emulation.md) — Replicates native mobile app experiences through fullscreen layouts and touch-based gesture controls on the web. ### Networking & Communication - [Story Interface Themes](https://awesome-repositories.com/f/networking-communication/ephemeral-story-publishing/story-interaction-controls/story-interface-themes.md) — Provides visual styles and interaction patterns that modify fullscreen modes and preview layouts. ([source](https://on.ramon.codes/kj6R))