4 dépôts
Animations specifically designed to highlight changes or focus areas within displayed source code.
Explore 4 awesome GitHub repositories matching user interface & experience · Code Highlight Animations. Refine with filters or upvote what's useful.
This project is a web-native presentation framework that renders slide decks from standard HTML or Markdown. It functions as a declarative slide engine, managing navigation, state persistence, and lifecycle events through a configuration-driven interface. By leveraging standard web technologies, it enables the creation of responsive, browser-based presentations that support complex layouts, nested transitions, and interactive content. The framework distinguishes itself through a modular, plugin-based architecture that allows developers to extend core functionality using custom hooks and event
Highlight code changes sequentially by defining specific line ranges via data attributes.
Motion Canvas is a TypeScript-based framework for creating programmatic animations and motion graphics. It functions as a code-based animation tool that allows developers to define visual transitions, element properties, and timing through scripts rather than traditional timeline-based interfaces. The library renders frame-accurate motion graphics directly in the browser using web technologies. The project utilizes a virtual scene graph to manage visual objects and their transformations, which are then rendered to an HTML5 canvas. It employs generator functions to sequence animations and reac
Provides a development environment for defining visual transitions and element properties through code.
Code Surfer is a web-based code slide framework and presentation tool designed for creating technical slides. It functions as a code animation library and diff visualizer that enables the rendering of source code with animated transitions, zooming, and highlighting. The project focuses on visualizing code evolution through state morphing and diff animations. It uses coordinate-based view transitions and smooth scrolls to guide viewers through changes between different code versions across a slide deck. The framework provides capabilities for attention management via line-level focus, section
Enables switching between different views of a code block via animated zooming, focusing, and highlighting.
Ce projet est un composant de présentation React conçu pour créer des curseurs de code animés et des guides étape par étape. Il fonctionne comme un outil de présentation de code qui permet aux utilisateurs de mettre en évidence la syntaxe et de faire la transition entre différentes versions d'une base de code lors de démonstrations techniques. L'outil permet la création de visites guidées de code animées en rendant des instantanés de code qui transitent par des changements incrémentaux. Ces séquences sont parcourues via des entrées clavier, permettant à un présentateur d'avancer dans les étapes du code pour expliquer les changements de logique lors d'une démo en direct. Le système fournit des capacités pour les flux de travail de présentation technique, y compris la conception de tutoriels de programmation et de supports pédagogiques pour développeurs. Il gère la structure visuelle des extraits de code et gère les transitions d'état entre les différentes versions du texte source.
Provides animations specifically designed to highlight changes and transition between versions of displayed source code.