WebASHFOG ARTICLE

Six Web Tools That Turn Browsing Into Making, Mapping and Shipping

Neal.fun, Travel Animator, Spline, MiroMiro, Capptivo and JSCodeCraft show how focused web tools can make learning, design, demos and code analysis feel immediate.

Abstract developer-tool forms and signal paths on a dark field

The most memorable web tools are rarely the ones with the longest feature lists. They take one activity that normally requires several applications, remove the setup and let the user begin before curiosity disappears.

That principle connects six otherwise unrelated products: Neal.fun, Travel Animator, Spline, MiroMiro, Capptivo and JSCodeCraft.

One turns abstract ideas into interactive experiences. One converts a journey into a moving map. One brings 3D design into a collaborative browser workspace. One extracts the actual visual system behind a website. One turns an ordinary screen recording into a polished product demonstration. The newest of the group collects lightweight JavaScript analysis tools in one place.

They are not a unified software stack, and they do not serve the same audience. What they share is a product philosophy: reduce the distance between seeing an idea and making something with it.

Tool Best understood as Most useful for
Neal.fun Interactive web experiments Learning, curiosity and playful storytelling
Travel Animator Animated route-video creator Travel reels, itinerary recaps and geographic storytelling
Spline Collaborative 3D design environment Interactive web scenes, product visuals and spatial prototypes
MiroMiro Website design and code extractor UI research, design-system recovery and AI-assisted rebuilding
Capptivo Open-source screen recorder and demo editor Product walkthroughs, tutorials and async updates
JSCodeCraft Browser-based JavaScript utility collection Quick code analysis, visualization and refactoring checks

Neal.fun proves that interaction can explain better than prose

Neal.fun is a collection of browser experiments by Neal Agarwal. It does not ask users to create an account, configure a workspace or understand a product category. Each page begins with one premise and teaches the interaction almost immediately.

The best-known examples demonstrate why this format works.

Spend Bill Gates’ Money starts with a fictional $100 billion balance and lets the visitor buy items ranging from a fast-food meal to skyscrapers and sports teams. The experience communicates the scale of extreme wealth more effectively than a paragraph full of zeroes because the user feels how difficult the balance is to exhaust.

The Deep Sea transforms scrolling into physical descent. As the page moves downward, familiar marine life gives way to increasingly strange deep-sea organisms and human exploration milestones. The long page is not merely a list. Its distance is the explanatory device.

The Password Game begins as a password form and continuously adds contradictory, absurd and increasingly elaborate requirements. It turns a familiar piece of interface friction into a systems puzzle.

Neal.fun is useful to designers because it demonstrates a form of web communication that is easy to forget: the browser is not only a container for articles and dashboards. It is a programmable medium. Scrolling, clicking, dragging and changing values can carry the argument.

The limitation is equally clear. These experiences are handcrafted editorial objects, not reusable productivity software. Their value comes from the exact fit between concept and interaction. Copying the visual style without that conceptual fit produces novelty rather than explanation.

Travel Animator makes route maps behave like short films

Travel videos often need a geographic transition: where the trip began, which stops followed and how far the journey moved. Building that sequence manually usually involves map screenshots, keyframes, route masks, camera moves and labels.

Travel Animator packages that work into a dedicated route-animation product. Users can define stops, plot routes from Google Maps or import GPX tracks, then choose vehicles, landmarks, map styles and camera presentation. The official product currently advertises more than 300 moving 3D models, more than 30 map styles, more than 80 landmark models and export up to 4K.

Its strongest feature is not rendering quality by itself. It is the use of a domain-specific editor.

A conventional animation tool treats a route as lines, layers and keyframes. Travel Animator understands places, stops, vehicles and paths. That vocabulary lets a travel creator work in the structure of the story rather than reconstructing it from general-purpose graphics primitives.

The product is frequently described as a browser tool that accepts a pasted Google Maps URL. The current official experience is more accurately presented as a mobile application for iOS and Android, even though its website explains the workflow and Google Maps route import. Users should not assume that every editing and rendering function runs in a desktop browser.

Travel Animator is best for itinerary recaps, travel introductions, documentary transitions and social videos. It is less suitable when a production needs precise cartographic accuracy, a custom geographic projection or detailed motion-graphics control. A specialized workflow saves time partly by limiting the decisions available.

Spline turns 3D scenes into web components

Spline occupies a more ambitious position. It is a browser-based 3D design and collaboration environment for creating scenes, materials, lighting, animation and interaction, then shipping the result into websites and applications.

A designer can build with familiar direct-manipulation controls instead of beginning in Three.js code. Scenes can respond to hover, clicks, scrolling and other events. Teams can comment and collaborate in real time. Finished work can be embedded through Spline’s viewer or integrated into HTML, React, Next.js, Webflow, Framer, iOS and Android projects.

This changes the handoff between design and development.

Traditional 3D workflows often produce a video, image sequence or heavy asset that a developer must reinterpret for the web. Spline can preserve the scene as an interactive runtime object. The designer is not merely handing over how the object should look; the artifact can contain how it moves and responds.

The “zero-code” description is directionally useful but incomplete. A creator can build a significant interactive scene without programming, yet production integration still benefits from an understanding of responsive layouts, loading behavior, event design and web performance. Complex geometry, textures, particles and post-processing can overwhelm low-powered devices or slow a landing page.

Spline is therefore strongest when the scene has a defined job: demonstrate a product, create a responsive hero object, explain a spatial relationship or add a controlled interactive moment. Using 3D merely because it is available can make a site slower without making it clearer.

MiroMiro converts visual reference into usable implementation context

Design inspiration usually arrives in an awkward form. A developer sees a useful hero section, color system or animation on another site, then opens DevTools, searches through nested elements, traces CSS variables and downloads assets one by one.

MiroMiro compresses that inspection process into a browser extension. It can select rendered elements, inspect and edit styles live, extract colors, gradients, typography, spacing, shadows, images, video, SVG and Lottie files, and export components as Tailwind or plain HTML and CSS.

The key distinction is that MiroMiro reads the rendered page rather than asking an AI model to infer code from a screenshot. A screenshot can communicate appearance, but it loses the original spacing values, fonts, DOM relationships and asset URLs. MiroMiro gives coding assistants structured implementation context instead of a visual guess.

The product now also exposes an API and hosted MCP server. That allows tools such as Claude, Cursor, ChatGPT or Codex to request component code, design tokens and assets from a live page as part of an agent workflow.

This is particularly useful for:

  • recovering a design system from an older site;
  • studying how a component is constructed;
  • moving an internal design from one stack to another;
  • giving an AI coding agent accurate visual tokens;
  • collecting references before building an original interface.

It also raises an obvious boundary. Technical accessibility is not permission to copy a commercial product wholesale. Logos, illustrations, photography, branded animations and distinctive compositions may be protected assets. MiroMiro is most defensible as an inspection, migration and research tool. The user remains responsible for what is reused.

The company says extraction happens inside the browser and that it does not receive browsing history or copied material. Its cloud library, API and MCP functionality are separate surfaces that users should evaluate according to the sensitivity of the page being inspected.

Capptivo treats a screen recording as an editable visual composition

A raw screen recording usually contains the right information and the wrong presentation. The pointer is hard to follow, important controls occupy a small part of the frame, browser chrome distracts from the product and the export does not fit social formats.

Capptivo is an MIT-licensed, open-source screen recorder and editor designed around that problem. Its public repository contains a Tauri desktop application for macOS, Windows and Linux.

Capptivo records screen content, cursor movement, clicks, microphone, system audio and optional face camera as editable project data. Its timeline can add fixed or cursor-following zoom regions, suggest zooms from clicks and create automatic motion between fragments. Users can add backgrounds, blur, shadows, rounded corners, annotations, captions and multiple aspect ratios before exporting MP4, WebM or GIF.

The local-first architecture is important for product demos. Recordings and projects remain in the operating system’s application-data directory, and on-device captions can run through whisper.cpp. No account is required for basic recording and editing.

The description of Capptivo as a pure front-end browser recorder is now outdated. The project has moved toward native cross-platform desktop capture, using platform-specific APIs and hardware encoding where available. That makes it more capable, but it also introduces installation and operating-system permission requirements. Current builds may be unsigned, and Linux behavior depends on PipeWire, portals and desktop-session support.

Capptivo is compelling for founders, support teams and developers who need polished demos without subscribing to a closed recorder. It is not a full replacement for a non-linear video editor when the project requires complex audio mixing, multicamera editing or extensive compositing.

JSCodeCraft bundles small checks that developers otherwise scatter across tabs

JSCodeCraft is the newest and least established product in this group. Its maker describes it as a free, no-signup collection of ten JavaScript tools built with Next.js, TypeScript and Tailwind CSS.

The publicly described toolset includes code analysis and quality scoring, visual structure mapping, refactoring suggestions and code-pattern detection. The larger idea is familiar to most developers: small diagnostic tasks are distributed across editor extensions, scripts and disposable utility sites. A focused browser workbench can provide quick feedback without requiring a project-wide installation.

This category of tool is valuable when it remains lightweight. A developer can paste an isolated function, inspect its structure, identify an obvious pattern or generate a refactoring direction before deciding whether the change belongs in the real codebase.

It should not be confused with a full static-analysis platform. Reliable analysis of a production JavaScript or TypeScript application usually requires the project’s type information, module graph, build configuration, runtime assumptions and tests. A browser utility that sees one pasted fragment cannot prove that a refactor preserves behavior across the application.

JSCodeCraft also has a shorter public record than the other products here. At publication time, the strongest accessible descriptions came from its maker and recent Product Hunt discussions rather than detailed independent documentation. Its claims should therefore be treated as an early product description, not a mature evaluation.

These tools win by narrowing the problem

The six products illustrate different forms of specialization.

Neal.fun narrows an idea until one interaction can communicate it. Travel Animator narrows animation to routes and journeys. Spline narrows 3D production toward interactive digital experiences. MiroMiro narrows reverse engineering to rendered design systems. Capptivo narrows video editing to software demonstrations. JSCodeCraft narrows code tooling to fast JavaScript checks.

That focus is why they feel immediate.

A general-purpose application can reproduce many of the same outputs, but it begins with a blank canvas and a large decision surface. Specialized tools begin with assumptions. Those assumptions remove flexibility, yet they also remove setup, terminology and repetitive work.

The practical question is not whether one of these tools can replace Figma, Blender, After Effects, DevTools, an IDE or a professional video editor. It is whether it can produce a useful first result before opening those larger systems becomes justified.

For many web workflows, that first result is now the valuable part. It lets a creator test the route, scene, component, demonstration or code idea while the intent is still clear.

The browser’s continuing evolution is not only about more powerful web applications. It is about more precise ones: small tools that understand the shape of a task and let the user begin immediately.