awesome-repositories.com
Blog
MCP
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectMCP serverAboutHow we rankPress
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
pomber avatar

pomber/code-surfer

0
View on GitHub↗
codesurfer.pomb.us↗

Code Surfer

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 zooming, and visual masking. It supports organized layouts through parallel code columns, sequential scrolling for long snippets, and the ability to import external source files to maintain a single source of truth. Visual styling is handled through custom themes and configuration-driven typography.

AI search

Explore more awesome repositories

Describe what you need in plain English — the AI ranks thousands of curated open-source projects by relevance.

Start searching with AI

Features

  • Technical Presentation Tools - Provides a platform for creating technical slide decks specifically optimized for guiding audiences through complex source code.
  • Presentation Animations - Provides a framework for generating technical slides with animated zoom and scroll effects to highlight code changes.
  • Code Walkthroughs - Moves through a code block step-by-step as the presentation advances to maintain narrative flow.
  • Code Walkthroughs - Visualizes how code evolves through animated diffs and smooth scrolling transitions across different steps.
  • Code Evolution Visualizers - Animates the transition between two code snippets to visualize the evolution between different states.
  • Diff-Based Interpolations - Computes visual differences between code versions to animate the transition from one snippet state to another.
  • Code Diff Visualizers - Renders visual differences between code versions to illustrate evolution across sequential presentation steps.
  • Section Focus Highlighters - Focuses viewer attention by fading out irrelevant code and zooming into specific logic segments.
  • Viewport Zooming - Enlarges specific code blocks or lines to ensure readability for the audience during a technical presentation.
  • Focus Masking - Uses opacity filters and dimming layers to isolate and highlight specific lines and column ranges of code.
  • Code Presentation Utilities - Provides features for formatting, highlighting, and animating code snippets specifically for use in technical slide decks.
  • Code Highlight Animations - Enables switching between different views of a code block via animated zooming, focusing, and highlighting.
  • Code Line Highlighting - Directs attention by dimming the surrounding code to emphasize specific selected lines.
  • Coordinate-Based Slide Transitions - Implements coordinate-based logic to animate the camera's zoom and scroll movement between specific code positions across slides.
  • Code Slide Frameworks - Provides a web-based framework for building presentations that load external source files into styled, side-by-side code columns.
  • Partial File Imports - Fetches external source files into code blocks to avoid manual duplication within presentation files.
  • Side-by-Side Comparisons - Renders multiple pieces of code side-by-side with independent sizing and themes for direct comparison.
  • Build-Time Source Injections - Loads source code from the local file system during build time to populate code blocks without manual copying.
  • Code Presentation Themes - Styles code, backgrounds, and typography using predefined themes or custom configuration objects.
  • Column Engines - Employs a layout engine to render multiple independent code containers side-by-side with custom sizing.
  • Presentation Navigation - Provides incremental scrolling through lengthy code blocks to maintain readability throughout a presentation.
6,378 stars·175 forks·JavaScript·MIT·17 views

Star history

Star history chart for pomber/code-surferStar history chart for pomber/code-surfer

How this analysis was created: This summary and feature list are AI-generated from collected project material and can contain mistakes. Stars, license and language are imported from GitHub. Inclusion does not mean that we have tested or audited this project. Check the source documentation for any feature you depend on. Learn more on our About page.

Projects sharing features with Code Surfer

These projects share indexed features with Code Surfer. Shared tags can include platform or build tooling; verify the primary use case before treating a result as a replacement.
  • code-hike/codehikecode-hike avatar

    code-hike/codehike

    5,365View on GitHub↗

    Codehike is a React-based documentation framework and interactive code walkthrough tool. It functions as a markdown content orchestrator that transforms decorated markdown into structured data and React components, serving as a visualization layer for highlighting code ranges, diffs, and compiler errors. The project is distinguished by its ability to create scrollycoding experiences and step-by-step technical tutorials. It features token-level animations that visually demonstrate how logic evolves between code versions and provides a system for syncing UI state to the browser scroll position.

    TypeScriptblogcodedocs
    View on GitHub↗5,365
  • jamiebuilds/spectacle-code-slidejamiebuilds avatar

    jamiebuilds/spectacle-code-slide

    4,137View on GitHub↗

    This project is a React presentation component designed to create animated code sliders and step-by-step walkthroughs. It functions as a code presentation tool that allows users to highlight syntax and transition between different versions of a codebase during technical demonstrations. The tool enables the creation of animated code walkthroughs by rendering snapshots of code that transition through incremental changes. These sequences are navigated via keyboard inputs, allowing a presenter to advance through code steps to explain logic changes in a live demo. The system provides capabilities

    JavaScript
    View on GitHub↗4,137
  • mfontanini/presentermmfontanini avatar

    mfontanini/presenterm

    7,852View on GitHub↗

    Presenterm is a CLI presentation framework and tool used to create interactive slide decks directly in the terminal. It functions as a Markdown slide renderer, transforming Markdown files into formatted terminal presentations with support for synchronized speaker notes and custom YAML themes. The project distinguishes itself through a built-in terminal code executor that runs code snippets live during a presentation, replacing source blocks with real-time output. It also features a terminal image renderer capable of displaying local images, animated GIFs, and pre-rendered diagrams or mathemat

    Rustclimarkdownmarkdown-slides
    View on GitHub↗7,852
  • hakimel/reveal.jshakimel avatar

    hakimel/reveal.js

    71,731View on GitHub↗

    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

    JavaScriptpresentationsslidesslideshow
    View on GitHub↗71,731
Compare all 30 related projects→

Frequently asked questions

What does pomber/code-surfer do?

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.

What are the main features of pomber/code-surfer?

The main features of pomber/code-surfer are: Technical Presentation Tools, Presentation Animations, Code Walkthroughs, Code Evolution Visualizers, Diff-Based Interpolations, Code Diff Visualizers, Section Focus Highlighters, Viewport Zooming.

Which projects share features with pomber/code-surfer?

Projects with overlapping indexed features include: code-hike/codehike — Codehike is a React-based documentation framework and interactive code walkthrough tool. It functions as a markdown… jamiebuilds/spectacle-code-slide — This project is a React presentation component designed to create animated code sliders and step-by-step walkthroughs.… mfontanini/presenterm — Presenterm is a CLI presentation framework and tool used to create interactive slide decks directly in the terminal.… hakimel/reveal.js — This project is a web-native presentation framework that renders slide decks from standard HTML or Markdown. It… antfu/skills — This project is a multi-purpose toolkit consisting of an AI agent knowledge base, a developer tool UI kit, a markdown… slidevjs/slidev — Slidev is a markdown-based presentation framework designed for creating interactive, web-based slide decks. It…