A website can feel like a document, an instrument, or a little world you can explore. The difference often comes from how it responds: a class settling into a timetable, a chart revealing a pattern, or daylight moving across a globe.
This is a working guide to the tools that make those experiences possible. The capability notes draw on the linked official documentation and project repositories. Each idea is a possible future feature; inclusion in this journal does not mean a tool is installed or that its suggested feature is already built.
The new chapters explore practical UI/UX improvements, scientific experiments, recipe workflows, photography and 3D creation. Some tools run inside a page; others help design the experience or make the assets before they are published. Each entry explains where it fits.
Every tool has suggested projects and a small first step. For ideas that bring several of them together, jump to the project collection at the end: 16 possible builds, with a role for each tool and a manageable first version.
Chapter 01
Giving an interface movement
A button reacting to a press, a menu unfolding, and an entire page changing are different animation problems. These tools overlap, but each has a useful centre of gravity.
Motion
Make changes in a React interface feel connected.
Motion is an animation library built around React components. Describe how an element should look when it appears, changes, or leaves, and Motion animates between those states. It can also follow changes in position and size, so a rearranged list can flow into its new layout.
It supports hover, tap and drag feedback, entrance and exit sequences, shared-element transitions, SVG drawing, and effects tied to scrolling. A selected thumbnail can appear to grow into a detail view, or a filtered grid can close its gaps smoothly.
Read further: Motion · React guide
Projects to try
Build a recipe explorer where results settle into new positions after filtering and the selected dish expands into its detail view. A second project could connect each creative-project thumbnail to its full case study with a shared image transition. Start with one recipe category and check that search, keyboard focus and the back button remain predictable throughout the animation.
When to reach for it. A strong starting point for everyday React UI animation. Simple colour changes can still use CSS; a second animation engine should not control the same element’s transform.
React Spring
Give movement weight, resistance, and a natural settling point.
React Spring animates values using a spring model. Mass, tension and friction shape how quickly something moves and how it settles. This is useful when the destination changes while an animation is still running, such as a card following a finger.
It can animate positions, scales and other values, coordinate trails of elements, and transition items in and out. A spring can feel firm and precise or soft and elastic; it does not have to bounce visibly.
Read further: React Spring · spring configuration
Projects to try
Make a consistent family of responsive buttons for Contact, CV and Projects, with a gentle lift on hover and a short compression on press. Try a separate course-planner experiment where a moved class settles into its term, or a theme icon that rotates and settles after a change. Start with a single contact button and tune the response on touch as well as with a mouse before applying it across the site.
When to reach for it. Use it for responsive, physical-feeling feedback. It does not fix expensive page rendering by itself, and the full-page theme reveal still needs its own transition design.
GSAP & ScrollTrigger
Direct a sequence, then decide what drives its progress.
GSAP is an animation engine with timelines: several movements can start together, overlap, pause, or reverse. ScrollTrigger is its scroll plugin. It can start a sequence when a section enters view, pin a scene in place, or link animation progress directly to scroll position, called scrubbing.
Use it for carefully timed navigation, staggered entrances, diagrams assembled in stages, and long-form visual stories. A pinned illustration can stay beside the text while its labels and layers change with each passage.
Read further: GSAP · ScrollTrigger guide and demos
Projects to try
Choreograph dashboard bubbles shrinking toward the centre and returning in one coordinated sequence, so navigation and the visible handover happen together. For a longer project, make a gasification report whose apparatus, flow arrows and labels appear in stages as the reader scrolls. Prototype a single entrance and exit first, then check interrupted navigation and reduced-motion behaviour before adding more layers.
When to reach for it. Choose it when timing across many elements matters. Reserve pinned scenes for places where they help explain something, especially on small screens.
Anime.js
Build expressive sequences from shapes, text, and numbers.
Anime.js is a JavaScript animation engine for visual elements and values. Its toolkit includes timelines, staggered timing, SVG and text animation, dragging, and layout animation. It can be used beyond React, which makes it useful for self-contained visual experiments.
Draw a line across an SVG diagram, introduce letters in a pattern, move labels in sequence, or coordinate a set of small illustrations. Timelines let those parts become one readable animation rather than unrelated effects.
Read further: Anime.js · animation toolkit
Projects to try
Create an IR spectroscopy explainer that draws a trace, then introduces the labels for selected peaks in a readable sequence. A smaller project could animate a molecular illustration on a chemistry-tool thumbnail when someone opens its preview. Begin with one SVG trace and three annotations, with a replay control and a complete still diagram available immediately.
When to reach for it. It overlaps with GSAP and Motion. Give it a specific illustration or experiment to own, rather than layering three libraries onto every button.
use-gesture
Translate a hand movement into useful input.
use-gesture recognises interactions such as dragging and pinching and provides movement data to your code. It tells you what the user is doing; a renderer or animation library decides how the object responds. The official guide pairs it with React Spring for dragging and returning to a resting position.
Build pinch-to-zoom figures, draggable controls, swipeable galleries, or a panel that follows a finger. Gesture data can also drive rotation, scale, or a value in an interactive tool.
Read further: use-gesture · introduction and example
Projects to try
Build a touch-friendly laboratory figure inspector where readers drag a prepared diagram and pinch to inspect its details. Another experiment could let visitors tilt a lighting demonstration by dragging across it, with a spring easing the view back into place. Start with one bounded image and visible zoom/reset buttons so the same task remains possible without gestures.
When to reach for it. Keep buttons and keyboard alternatives alongside gestures. Recognising a drag does not automatically make a drag-only interface accessible.
View Transitions API
Let the browser connect the old view to the new one.
This is a browser API rather than an installed animation library. It captures representations of the old and new views and lets CSS animate between them. Named elements can have their own transitions instead of being included only in a whole-page fade.
Connect a project thumbnail to its full image, preserve visual continuity when changing layouts, or reveal a new colour theme across the page. It supports same-document updates and supported same-origin page navigations, with different setup requirements.
Read further: MDN · View Transition API
Projects to try
Build the light/dark reveal around the exact sun or moon icon, so the new palette visibly travels from the control the visitor pressed. A separate project could preserve the selected project image while its card changes into a full report. Start with the theme switch, including a direct nonanimated update for reduced motion and browsers without the API.
When to reach for it. Feature-detect support and keep a working fallback. The API provides the transition mechanism; the origin, timing, and treatment of moving content still need to be designed.
Chapter 02
Drawing an experience before coding it
Some motion is easier to author visually. These tools connect a designed animation to the website, from a small loading illustration to an interactive character or a carefully directed scene.
Rive
Design an illustration that reacts to the person using it.
Rive combines a visual design and animation editor with runtimes that play the result inside an application. Its state machines and data binding connect artwork to inputs and application state, so a graphic can react instead of simply replaying a loop.
Create an illustrated control, a character that responds to a pointer, or a progress indicator whose appearance follows real data. Timelines handle motion while interactive logic selects which behaviour to show.
Read further: Rive · introduction
Projects to try
Create a small illustrated lab assistant that changes from waiting to thinking to finished as a real calculation progresses. Alternatively, make a sun-and-moon control whose artwork responds to the selected theme and a deliberate press. Start with three clearly defined states and keep the calculation status in text beside the illustration.
When to reach for it. It needs an authored Rive asset and a runtime. Choose it when the illustration itself is interactive; ordinary text buttons rarely need that extra production step.
dotLottie
Bring a prepared animation into the page.
The dotLottie web player renders .lottie files and Lottie JSON animations in the browser. It provides playback control, layout, theming, multi-animation support and interactive state machines, with wrappers for frameworks including React.
Play a loading illustration, a success checkmark, an explanatory loop, or a short branded sequence. Playback can be paused or controlled by the surrounding interface instead of running continuously.
Read further: LottieFiles · JavaScript player
Projects to try
Give each tools category a short loading illustration, such as a filling flask or a plotting line, which stops as soon as the tool is ready. A second project could add a brief confirmation after a calendar file has actually been prepared. Begin with one lightweight animation and a still alternative, keeping the real loading or export status visible in text.
When to reach for it. A player does not create the artwork. Asset complexity affects rendering cost, so test the actual animation on mobile and provide a still state for reduced motion.
Theatre.js
Edit animation timing on a visual timeline.
Theatre.js provides tools for authoring keyframed sequences visually, then playing them through code. Its guides cover HTML and SVG as well as Three.js and React Three Fiber, so a sequence can control both page graphics and 3D scenes.
Direct a camera move, adjust an object’s position across a sequence, or coordinate visual properties with audio. Keyframes are especially useful when the exact composition at particular moments matters.
Read further: Theatre.js · overview and guides
Projects to try
Direct a short introduction to the Earth view that approaches the globe, turns toward the selected city and settles into its conditions display. For an engineering report, author a camera sequence that moves from the outside of a reactor to its labelled internal parts. Start with a short, skippable sequence and return control to the reader as soon as it ends.
When to reach for it. Best for art-directed sequences with repeatable timing. It is less necessary for small state changes that a spring or CSS transition already handles well.
Chapter 03
Building scenes you can explore
Rendering decides what appears on screen. Physics decides how objects respond to forces. Keeping those jobs distinct makes it easier to choose a tool for a globe, a pixel-art scene, or a playful simulation.
React Three Fiber
Build a Three.js scene using React components.
React Three Fiber is a React renderer for Three.js. It lets you describe 3D objects, cameras, lights and materials in a component structure and connect them to application state. Three.js still supplies the underlying graphics capabilities.
Create a globe with textured surfaces, a rotatable molecular model, or an interactive piece of equipment. Materials and lighting can convey shape, while camera controls let the visitor inspect the scene.
Read further: React Three Fiber · official repository and introduction
Projects to try
Build a React-based apparatus viewer whose selected part stays in sync with the explanation and controls elsewhere on the page. Another project could organise the Earth surface, clouds and night lights into scene components that respond to the same time slider. Start with one exported object and two selectable components, using verified data separately from the rendering layer.
When to reach for it. It renders the scene; it does not supply astronomical calculations, weather observations, or molecular data. Those inputs and their accuracy remain separate responsibilities.
PixiJS
Draw rich 2D scenes with the graphics processor.
PixiJS is a 2D rendering engine with WebGL and WebGPU support. It is built for interactive graphics such as games and visual applications, where many sprites and graphical elements need to be drawn together.
Build animated landscapes, dense particle scenes, illustrated interfaces, or a small browser game. It is a useful option when a scene has enough moving parts that managing each one as a normal page element becomes awkward.
Read further: PixiJS · rendering engine
Projects to try
Make a richer pixel-art landscape with drifting clouds, light rain and small details that change with the selected city. A separate interactive illustration could show particles moving through a simplified lab process, with play, pause and speed controls. Start with one compact scene and a small number of sprites, pausing it when it leaves the screen.
When to reach for it. Use it for the visual scene while keeping meaningful text and controls in accessible HTML. A canvas renderer alone does not provide a complete game or physics system.
Matter.js
Make 2D objects collide, fall, and push each other.
Matter.js is a two-dimensional rigid-body physics engine. It simulates objects, collisions and constraints, letting movement emerge from forces and contact rather than a predetermined animation path.
Build a pile of draggable objects, a pendulum, a seesaw, or a small mechanical playground. Objects can tumble into a container or respond to being picked up and released.
Read further: Matter.js · physics engine and examples
Projects to try
Create a lab-bench playground where visitors pick up simple objects, balance them on a seesaw and watch collisions. A second project could compare pendulum motion under different settings, with the simplifications explained beside the scene. Begin with three objects and a reset button, treating the result as an illustrative rigid-body experiment rather than a validated scientific simulation.
When to reach for it. Rigid-body physics is useful for interaction and intuition. It is not a fluid, chemistry, or molecular simulation, and decorative collisions should not obstruct navigation.
Chapter 04
Making data visible
A scientific plot, a street map and a network diagram communicate different kinds of information. Here, the choice starts with the data and the question a reader wants to answer.
D3.js
Design a custom visual language for data.
D3 is a collection of tools for data visualisation. Scales turn numbers into positions or colours; shapes produce lines and areas; geographic projections turn spherical coordinates into maps. Its interaction tools include zooming, dragging and brushing a range of data.
Create a bespoke spectrum plot, a geographic projection, an interactive timeline, or an unusual scientific diagram. It offers fine control over how data becomes graphics rather than limiting you to a fixed set of charts.
Read further: D3 · capabilities and examples
Projects to try
Build a linked IR-spectrum explorer where selecting a wavelength range highlights its peaks and the corresponding interpretation notes. Another project could compare a night's Sun and Moon altitude curves against a highlighted photography window. Start with one verified dataset and a shared selection between two views, keeping units and the current range visible.
When to reach for it. Choose D3 for a view that needs custom geometry or interaction. For conventional exploratory plots, Observable Plot can save substantial setup work.
Observable Plot
Turn a dataset into a readable chart with less setup.
Observable Plot is a higher-level visualisation library built on D3. You compose marks such as dots, lines and bars; scales arrange them, transforms can derive values such as bins, and facets repeat plots for comparisons between groups.
Create histograms, scatter plots, time series, distributions, or small multiples. Layering marks makes it possible to compare raw observations with a summary in the same figure.
Read further: Observable Plot · marks, transforms and facets
Projects to try
Turn one laboratory result into a browser figure where readers switch experimental groups while the axes remain consistent. A second project could compare repeated measurements with distributions and small multiples, showing the raw observations alongside the summary. Start with a saved dataset from one report and reproduce the original figure before adding exploratory controls.
When to reach for it. Start here for standard data graphics, then use D3 if the design needs finer control. Neither library validates the experiment or chooses the correct statistical method for you.
MapLibre GL JS
Create a navigable map with your own visual style.
MapLibre GL JS is an open-source library for interactive maps. It can render map sources with configurable styles, provide navigation and location controls, and display markers, popups and geographic layers. Its API also includes globe and terrain capabilities.
Build a restaurant explorer, a travel map, or a geographic planning tool with selectable layers. Colours and labels can be designed to match the website while retaining the familiar ability to pan and zoom.
Read further: MapLibre · introduction and API
Projects to try
Give the darkness tool a map of the selected location, candidate photography sites and a switchable light-pollution layer from an appropriately licensed source. Another project could turn the food collection into a restaurant map with filters and links to personal notes. Begin with a few curated pins and clear attribution before adding larger datasets or location permissions.
When to reach for it. The map engine does not include every dataset or a free tile service. Light pollution, terrain, weather and map tiles need their own sources, licences and attribution.
deck.gl
Put large datasets into interactive visual layers.
deck.gl uses the graphics processor to render data as layers, such as points, polygons, paths and text. It supports picking, highlighting and filtering, and can work alongside basemap libraries including MapLibre.
Visualise many geographic observations, compare spatial patterns, or animate routes through time. A basemap supplies context while the data layers communicate measurements on top of it.
Read further: deck.gl · layers and map integration
Projects to try
Build a regional night-light explorer where visitors compare a large set of observations on top of a map. A second project could show a photography journey as dated points and paths, with a selected stop opening its images. Start with one documented dataset and one layer, making its measurement date and resolution clear instead of presenting it as live sky brightness.
When to reach for it. Useful when the data volume or layering warrants it. For a few pins, MapLibre alone is simpler. GPU rendering does not make inaccurate or low-resolution source data more precise.
Cytoscape.js
Show how things connect to one another.
Cytoscape.js is a graph visualisation and analysis library. Here, a graph means nodes and the connections between them, rather than a conventional x–y plot. It provides layouts, styling and interactive exploration for those networks.
Draw course prerequisites, biological pathways, linked concepts, or a process network. Visitors can inspect a node and follow its relationships instead of reading a long list of dependencies.
Read further: Cytoscape.js · documentation and network demos
Projects to try
Add a prerequisite explorer to the course planner that highlights the courses preceding a selection and the later options it opens. A separate laboratory explainer could map the relationships between experimental steps, measurements and conclusions. Begin with a small, manually checked network and make each connection's meaning explicit before expanding the dataset.
When to reach for it. The relationships must come from a reliable dataset. A network layout cannot infer valid prerequisites or biological causality from course names or visual proximity.
Chapter 05
Keeping the experience coherent
Some tools work behind the visible effect. They help decide which state is allowed, or keep scrolling and animation in step. Their value is in how predictable the interface feels.
XState
Describe what can happen next in an interface.
XState manages application logic through events, state machines and actors. A state machine defines states and the transitions between them. Actors provide a way to organise independent pieces of behaviour that communicate through events.
Model a file upload, a multi-step form, navigation, or a tool with loading, ready, error and retry states. It helps make the rules explicit when a growing set of booleans becomes hard to reason about.
Read further: Stately · XState introduction
Projects to try
Build a transcript-import flow with distinct choose, read, review and save states, including cancellation and a useful retry path. A second project could coordinate dashboard navigation so rapid repeated clicks cannot leave the interface between two pages. Start by mapping one workflow's events and failure cases, then connect its states to existing controls and animations.
When to reach for it. XState coordinates behaviour; it does not draw or animate the interface. Pair it with an animation tool only when the workflow is complex enough to benefit.
Lenis
Coordinate smooth scrolling with a visual story.
Lenis is a smooth-scrolling library. It provides control over scrolling and a frame loop that can be synchronised with an animation system. Its documentation shows how to connect that loop to GSAP and ScrollTrigger.
Create an editorial page where scrolling, scene changes and visual movement follow the same rhythm. It can also handle programmatic scrolling, while configuration determines how nested scrolling areas behave.
Read further: Lenis · official guide and integration notes
Projects to try
Create an optional visual essay about the gasification project, with a diagram evolving beside the text as the reader scrolls. A photography story could similarly guide readers through a location, shooting conditions and the finished images. Try one short article first, checking touch input, anchor links and reduced motion while retaining normal scrolling where the smoother behaviour adds no value.
When to reach for it. Smooth scrolling changes an important part of the browsing experience. Test trackpads, touch, anchors and reduced-motion preferences; it is an optional design choice, not a universal performance fix.
Chapter 06
Making everyday interactions easier
Useful interface work often happens in small details: a menu staying inside the screen, a course moving to the right term, or a long list keeping up with your finger. These open source tools give those interactions a reliable foundation.
React Aria
Build controls that work with a mouse, a finger, or a keyboard.
React components
React Aria is Adobe’s collection of accessible React components and hooks. It supplies behaviour for controls such as date pickers, searchable selection fields, dialogs and sliders, while leaving their appearance to your own CSS. It handles details such as keyboard navigation, focus management and localised dates and numbers.
Use it to build consistent forms, menus, calendars and selectable lists. Its collection components also support drag and drop with keyboard and screen-reader interactions. The same control can adapt its behaviour to touch and mouse input without requiring separate mobile markup.
Read further: React Aria · components and interaction examples GitHub
Projects to try
Build a searchable course selector with keyboard navigation, clear selection feedback and a predictable way to add courses. Another project could give the darkness tool a date picker and location dialog styled to match the website. Start with one complete control and test its labels, focus order and touch targets before reusing the pattern in transcript import.
When to reach for it. A useful foundation when adding or replacing complex controls. It supplies interaction behaviour; clear labels, readable colours and sensible page structure still belong to the design.
Floating UI
Keep a tooltip or dropdown attached to its button and inside the screen.
Browser library · React integration
Floating UI calculates where a floating element should sit relative to another element. It can flip a popup to the other side, shift it away from a screen edge, or adjust its size when space runs out. Its React tools also help manage opening, dismissing and interacting with those elements.
Build course previews, chart tooltips, dropdowns and small information panels that follow their anchors as the page scrolls or resizes. A tooltip can also be anchored to a coordinate, such as a point on a plot, instead of a normal button.
Read further: Floating UI · positioning and React interactions GitHub
Projects to try
Add a course preview beside each timetable block showing its units, meeting times and actions without pushing the calendar around. A second project could attach explanations to spectrum peaks or unfamiliar chemistry terms. Start with a preview that opens on focus or tap as well as hover, and check its position at every edge of a phone screen.
When to reach for it. Choose it for custom popup positioning. Many component libraries already handle this internally, so use their built-in behaviour where it is sufficient.
dnd kit
Let visitors move and rearrange things deliberately.
Drag-and-drop library · React integration
dnd kit provides the machinery for draggable items, drop targets and sortable collections. It supports lists, grids and movement between containers, with pointer, touch and keyboard input. You decide which destinations are valid and how the application’s data changes after a drop.
Make a timetable, reorder a photo collection, arrange a cooking sequence, or move cards between columns. Customisable drag previews and collision detection let the visible item and the intended destination remain clear during movement.
Read further: dnd kit · React quickstart GitHub
Projects to try
Let visitors drag a course from the catalogue into a term, highlighting valid destinations before the drop is committed. A meal-planning project could use the same idea to arrange recipe cards across the week. Start with movement between two containers and retain explicit move buttons, keyboard support and a way to undo an accidental move.
When to reach for it. Use it for moving items between meaningful destinations. React Spring can animate the resulting placement, but the drag controller and spring should not both write the same transform. Follow the current React guide when choosing packages.
TanStack Virtual
Keep long lists responsive by rendering the part you can see.
Browser library · React integration
TanStack Virtual calculates which rows are visible in a scrolling window, plus a small surrounding buffer. The interface renders those rows while preserving the scrollable space for the full list. This reduces the number of page elements the browser has to manage at once.
Use it for large course catalogues, search results or tables. It supports vertical and horizontal lists, and the two axes can be combined for grids. It supplies the calculations while you retain control over the markup and styling.
Read further: TanStack Virtual · introduction and examples GitHub
Projects to try
Make the long course catalogue beside the weekly calendar responsive by drawing only the visible rows and a small buffer. Another project could display a large experimental-results table without filling the page with thousands of elements. Start with the course list, measuring actual scrolling and preserving selection, focus and jump-to-result behaviour when rows leave the screen.
When to reach for it. Use it when rendering many rows is the bottleneck. It does not speed up the underlying search or data download. Off-screen rows are absent from the page, so keyboard focus and jump-to-result behaviour need explicit handling.
Chapter 07
Turning scientific notes into experiments
A report becomes more useful when a reader can change an input and inspect the result. These tools cover calculation, molecular structures and scientific charts; the equations, assumptions and original measurements still need to be supplied.
Pyodide
Run Python calculations directly inside a web page.
Python runtime in the browser
Pyodide brings Python to the browser through WebAssembly, a format browsers can execute alongside JavaScript. Its available scientific packages include NumPy, pandas, SciPy and Matplotlib. Python results can be passed back to the surrounding interface without requiring a separate Python server for every calculation.
Build a small data-analysis workspace, rerun a fitted curve, change a simulation parameter, or let a student experiment with a prepared Python example. Files and data needed by the calculation must be made available to that browser session.
Read further: Pyodide · browser use and background workers GitHub
Projects to try
Add a rerunnable laboratory analysis where readers adjust the fitting range and compare the new curve with the saved report. A second project could offer a small Python worksheet for exploring measurement uncertainty using a prepared dataset. Begin with one compatible calculation, load the runtime only on request and run the work off the main interface thread.
When to reach for it. Load the runtime only when requested and run lengthy work in a background worker to keep scrolling responsive. Check package compatibility first: a desktop notebook does not automatically become browser-ready.
RDKit.js
Turn a molecular description into a structure you can inspect.
Chemistry library in the browser
RDKit.js exposes a subset of the RDKit chemistry toolkit to JavaScript. It can read molecular structures, draw them as SVG or canvas graphics, and find and highlight matching substructures. A SMILES string—a compact text description of a molecule—can become a clear two-dimensional diagram.
Display a set of compounds consistently, highlight a functional group, or search for a shared structural fragment. The official examples include React integration, so chemical drawings can respond to a selection elsewhere in a page.
Read further: RDKit.js · React molecular drawing examples GitHub
Projects to try
Create a functional-group explorer where selecting a group highlights it in an example molecule beside the relevant IR notes. Another project could compare a small collection of compounds by searching for a shared structural fragment. Begin with curated structures and verified labels; present the drawings as structural context rather than automatically predicting an experimental spectrum.
When to reach for it. Useful for structural visualisation and searching. It does not provide an experimental spectrum or establish a compound’s measured thermodynamic properties; those require separate evidence or models.
math.js
Calculate with units, matrices, fractions and expressions.
JavaScript calculation library
math.js extends JavaScript’s numerical tools with an expression parser, units, complex numbers, fractions, matrices and higher-precision number types. It also supports symbolic operations such as simplifying expressions and taking derivatives. It works in both browser and server environments.
Create an equation workspace, convert compatible units, evaluate a matrix calculation, or show how an expression changes as its inputs move. Calculations can retain units instead of relying on a separate label beside every plain number.
Read further: math.js · capabilities and documentation GitHub
Projects to try
Build an engineering scratchpad where pressures, temperatures and other quantities retain their units through a calculation. A second project could let readers vary an equation's inputs and inspect the intermediate values beside the result. Start with a small set of supported quantities and reference examples, handling temperature offsets and invalid unit combinations explicitly.
When to reach for it. It provides mathematical operations, not validated physical-property models. Define accepted expressions and units, and check numerical tolerances. A volume-to-mass conversion still needs the material’s density.
Plotly.js
Make scientific plots that readers can zoom, inspect and rotate.
Browser charting library
Plotly.js is an open source JavaScript charting library with scientific chart types, including contour plots, heatmaps, error bars and three-dimensional plots. Data traces and layout settings describe the figure, while the library supplies interactions such as hovering over points and zooming into a region.
Build interactive spectra, compare repeated measurements with uncertainty bars, rotate a response surface, or inspect a dense scatter plot. It is useful when a standard scientific chart needs several built-in interactions without designing each one separately.
Read further: Plotly.js · library, chart types and bundles
Projects to try
Give laboratory figures inspectable values, selectable traces and a way to compare a recalculated fit with the original measurements. A thermodynamics project could add a rotatable response surface alongside a simpler two-dimensional view. Begin with one plot that reproduces the saved report accurately, then add controls that preserve axis labels, units and uncertainty information.
When to reach for it. The JavaScript library can run independently of Plotly’s hosted products. Load only the chart types needed and avoid putting a large plotting bundle on every page. Error bars must come from a defined uncertainty calculation.
Chapter 08
Making recipes useful in the kitchen
A recipe can be more than a page to read. Structured ingredients can support adjustable portions, shopping lists and cooking steps. These projects range from small parsers to an entire recipe application and a shared food database.
Cooklang
Write a readable recipe that software can also understand.
Recipe format · parser ecosystem
Cooklang is a plain-text recipe format with markers for ingredients, quantities, cookware and timers. The instructions remain readable, while a parser can extract the information needed for an ingredient list or cooking interface. Recipes live in portable .cook files.
Turn marked ingredients into a checklist, make timers clickable, or collect ingredients across a menu. The ecosystem includes conventions for shopping lists, pantry information and scaling; support depends on the parser or application chosen.
Read further: Cooklang · recipe format and conventions GitHub
Projects to try
Create a cooking view with explicitly marked ingredients, adjustable portions and a timer beside each timed step. A second project could combine a few chosen recipes into a reviewed shopping list, grouping compatible quantities. Start by hand-authoring three personal recipes and verifying ingredient scaling separately from cooking temperatures, equipment sizes and timings.
When to reach for it. Cooklang describes the recipe; it does not make arbitrary prose structured automatically. The linked TypeScript parser currently lists scaling as unfinished, so scaling would need a compatible implementation. Cooking times should not simply multiply with portions.
Ingredient Parser
Separate an ingredient sentence into usable pieces.
Python library · import workflow or service
Ingredient Parser extracts structured information from recipe ingredient text: the food name, amount, unit, preparation and other notes. It uses a trained language model to label parts of a sentence and includes confidence values in its results. Its examples cover fractions, packaged quantities and alternative ingredients.
Turn imported ingredient lines into editable fields, standardise the presentation of quantities, or prepare data for shopping lists and portion adjustments. The original text can remain visible beside the parsed result so mistakes are easy to correct.
Read further: Ingredient Parser · examples and limitations GitHub
Projects to try
Build a recipe-import assistant that proposes quantities, units and ingredient names beside the original lines for an editor to review. Another project could help clean an existing collection by flagging ambiguous or incomplete ingredient entries. Start with a small sample of English recipes and save corrected structured data only after review, preserving the original text for comparison.
When to reach for it. This is a Python tool, so use it during import or behind a service. Review ambiguous lines, especially alternatives with different amounts; the documentation identifies cases the parser cannot fully separate.
Open Food Facts
Look up information about packaged food by product or barcode.
Open database · public API
Open Food Facts is a community-maintained food-product database with an API. Records can include product names, ingredients, nutrition information and packaging images. It supplies product data for an interface you build, rather than a ready-made recipe or meal-planning screen.
Create a pantry lookup, compare labels on packaged ingredients, or connect a selected product to a shopping list. A barcode scanner would be a separate part of the interface; the database supplies the matching product record.
Read further: Open Food Facts · API, data quality and reuse terms GitHub
Projects to try
Add a pantry lookup where a visitor enters a barcode and sees the available product image and recorded ingredient list. A second project could compare the recorded labels of packaged ingredients used in a recipe and link each result back to its source. Begin with manual barcode entry and handle missing or incomplete records clearly; product data should not be treated as a guarantee about allergens.
When to reach for it. Records can be missing, outdated or incomplete, so preserve the source and do not infer safety from absent allergen data. Respect API limits and attribution requirements: the database uses ODbL, while images have a separate attribution/share-alike licence.
Mealie
Organise recipes, a weekly menu and a shopping list in one place.
Complete application · separate hosting
Mealie is an open source recipe manager with a web interface and an API for other applications. It supports importing a recipe from a URL, manual editing, organising recipes into cookbooks, planning meals and collecting ingredients into a shopping list.
Run a personal recipe collection with a weekly plan, or explore its approach to grouping shopping items and managing recipes. Its API makes a separate custom interface possible if maintaining a recipe service is part of the project.
Read further: Mealie · application and documentation GitHub
Projects to try
Set up a personal meal-planning workspace where saved recipes become a weekly menu and a shared shopping list. If a separate recipe service is worth maintaining, a custom page on this website could read that collection through Mealie's API. Start with a small private instance and decide which service owns recipes and edits before connecting it to the existing collection.
When to reach for it. This is a whole application with its own storage and deployment, not a React component to drop into a page. Direct integration would need deliberate account and data synchronisation. Its source is licensed under AGPL-3.0.
Chapter 09
Showing photographs and details well
A photograph deserves a good viewing experience, and a scientific image may need closer inspection than a page thumbnail allows. These tools help with viewing, metadata and composition at different stages of the image workflow.
PhotoSwipe
Open a photograph into a focused, zoomable viewing experience.
Browser image gallery
PhotoSwipe is a JavaScript gallery and lightbox for mobile and desktop. It opens images from thumbnails, supports touch gestures and zooming, and can choose larger responsive image sources as a reader zooms in. The viewer can be loaded only when someone opens a photograph.
Create a travel gallery, browse a set of plated dishes, or inspect project photographs without leaving the current page. Opening and closing can visually connect the full image to its thumbnail, including a thumbnail cropped to fit a card.
Read further: PhotoSwipe · gallery features and examples GitHub
Projects to try
Create a photography gallery that opens uncropped originals from the creative-project thumbnails and supports swiping between related shots. A second project could show the stages of a recipe as a captioned sequence of preparation and finished-dish photographs. Begin with one carefully sized image set, preserving meaningful captions and returning focus to the thumbnail when the gallery closes.
When to reach for it. A strong fit for normal photo galleries. Captions need explicit implementation or its caption plugin. Supply appropriately sized images so a phone does not download every original photograph in advance.
OpenSeadragon
Explore a very large image without loading every pixel at once.
Browser viewer · tiled images
OpenSeadragon displays images that can be zoomed and panned on desktop or mobile. For large images, a prepared pyramid of image tiles supplies different detail levels as the viewer moves. It supports formats and services such as Deep Zoom and IIIF, as well as ordinary images.
Show microscopy images, stitched panoramas, scanned diagrams or detailed artwork. Overlays can mark a region of interest, and additional plugins can provide annotation tools that follow the image as it moves.
Read further: OpenSeadragon · image formats, controls and overlays GitHub
Projects to try
Make a microscopy explorer where readers start with the full image, then zoom into labelled regions without enlarging the entire report. Another project could let visitors inspect a stitched landscape panorama or a detailed scan of a research diagram. Start with one prepared tiled image and a few documented landmarks, checking that labels and any scale bar stay aligned during zooming.
When to reach for it. Most useful when the original image contains enough detail to justify deep zoom. Large originals need a tile-generation and hosting step; zooming cannot restore detail missing from a small screenshot.
exifr
Read the camera settings stored inside a photograph.
JavaScript image-metadata reader
exifr reads image metadata in browser or server code. Depending on the file and selected options, it can extract camera information, exposure settings, orientation, dates and GPS coordinates. It can request only selected fields rather than processing every available metadata block.
Build a camera-settings panel for a gallery, organise photos using their recorded capture times, or show which exposure settings were used for a night photograph. A visitor-selected local file can be inspected in the browser before deciding what to upload.
Read further: exifr · supported metadata and usage
Projects to try
Add a How this was shot panel beside night photographs with available focal length, aperture, shutter speed and ISO. A second project could help the photo uploader suggest capture dates and camera-setting captions for review. Start with a local preview and an explicit list of fields to publish, leaving GPS coordinates and other unwanted metadata out of the public result.
When to reach for it. Some exported images have no metadata, and recorded clocks or locations can be wrong. exifr reads metadata; hiding a field in the interface does not remove it from the downloadable original image.
Cropper.js
Choose the crop yourself before an image becomes a thumbnail.
Browser image-editing component
Cropper.js supplies an interactive image-cropping interface. Its current design uses custom elements that can be composed into an editor, with controls for selecting an area and transforming the image. The selected region can be exported through a canvas for the surrounding application to save.
Let an editor position a crop, zoom into a subject, rotate an image, or prepare different aspect ratios for cards and banners. This gives the person choosing the image more control than an automatic centre crop.
Read further: Cropper.js · guide and editor examples GitHub
Projects to try
Build an image-upload preview where an editor positions the subject for a desktop project card and a mobile thumbnail before saving. A second project could prepare consistent recipe-cover images while retaining the uncropped original for the gallery. Start with two target aspect ratios and show both resulting crops together so the choice is visible before publication.
When to reach for it. Use it as an editing step and retain the original image separately. Uploading, resizing, compression and permanent storage still need to be handled by the website’s image workflow.
Chapter 10
From a design to an interactive world
Designing an interface, making its artwork and running an interactive scene are different stages of the same project. These six tools connect those stages: sketch and prototype the experience, create the assets, then bring them into the website.
Blender
Create the objects, lighting and animation that give a scene its character.
Desktop app · 3D modelling, animation and rendering
Blender is an open source 3D creation suite for modelling, sculpting, rigging, animation, simulation and rendering. You can build an object, give it materials, place lights and cameras, and animate a sequence. The result can become a finished image or video, or a model exported for an interactive viewer.
Make an exploded equipment diagram, a looping scientific illustration, stylised food, or a scene that demonstrates photographic lighting. Blender supports glTF/GLB export, which can carry suitable models and animations into a browser renderer such as Three.js.
Read further: Blender · creation tools and features GitHub
Projects to try
Model a simplified gasification reactor and animate its major parts separating into a labelled cutaway. Another project could compare lighting setups around a plated dish to explain how a photograph was made. Start with a small animated flask for a chemistry thumbnail, testing a compact web export before committing to a detailed scene.
When to reach for it. Install Blender to author the asset; visitors receive the export. Complex materials and simulations may need baking or simplification for the web. Use a rendered loop when the reader does not need to manipulate the scene.
Penpot
Design the layout and reusable pieces before building the page.
Browser design app · hosted or self-hosted
Penpot is an open source interface-design platform with vector drawing, reusable components, shared libraries, design tokens and interactive prototypes. Its layout tools use concepts from CSS Grid and Flexbox, so spacing and resizing can be explored as rules rather than only as fixed pictures.
Create desktop and mobile layouts, define light and dark colour palettes, organise icons, or make a clickable page flow. Developers can inspect design properties and access SVG, CSS and HTML information to guide the implementation.
Read further: Penpot · design, prototypes and developer handoff GitHub
Projects to try
Design one consistent family of tool cards for desktop, tablet and mobile, including thumbnail proportions, spacing and the dark-green palette. A second project could prototype the weekly scheduler with its search list, calendar and export controls at each screen size. Start with a small component library containing one card, button, menu and form field, then try those pieces in two real page layouts.
When to reach for it. Use the hosted browser app or run your own instance. Design files and prototypes guide the website build; application logic, responsive behaviour and production animation still need implementation and checking in the actual page.
Godot Engine
Build a small world with its own rules and interactions.
Game editor · export a browser experience
Godot is an open source engine for 2D and 3D games and interactive experiences. Its editor organises objects into reusable scenes, with tools for animation, input, physics and scripting. A web export packages a project so it can run inside a compatible browser.
Create a walkable pixel-art environment, a small learning game, or an interactive lab with objects that respond to the visitor. The scene can have its own controls and progress while the surrounding website provides the introduction and explanation.
Read further: Godot · web export capabilities and requirements GitHub
Projects to try
Make an optional Explore the lab page where visitors move a character between stations and discover short explanations of the laboratory experiments. A separate world could connect London, LA and Hong Kong through the existing pixel-art settings. Start with one room, one interaction and touch-friendly controls, then export and test that small scene in the browser before adding more areas.
When to reach for it. Author in the editor and load the exported experience on demand. Plan for the web renderer and mobile controls early. Godot 4 web exports currently require WebAssembly and WebGL 2; C# projects cannot currently use that export path.
Three.js
Put a 3D scene directly into the website and connect it to the controls.
Browser 3D library · already used by this site
Three.js is a JavaScript library for rendering scenes made from geometry, materials, cameras and lights. Its loaders can bring in exported assets such as glTF models, and its animation tools can play their clips. It provides the underlying graphics layer used by React Three Fiber.
Build a rotatable object, animate a cutaway, change lighting with a slider, or connect a model’s state to a form. The site already uses Three.js for the Earth renderer, including surface textures and the lighting driven by the astronomical calculations.
Read further: Three.js · rendering, loaders and animation documentation GitHub
Projects to try
Load a Blender-made apparatus into a project report so readers can rotate it, select a component and reveal its explanation. Another project could extend the existing Earth with clear location markers and a guided view of daylight moving over the selected city. Start with a single compact model and accessible controls, using the site's existing Three.js setup as the reference for loading and rendering.
When to reach for it. Three.js is already a website dependency. New scenes still need assets and interaction code. Keep explanatory labels and controls in accessible HTML, and load detailed models only when the scene is needed.
Dust3D
Turn a simple connected sketch into a small 3D character.
Desktop app · low-poly models and character animation
Dust3D creates low-poly models from nodes and edges drawn on a two-dimensional canvas. It generates the mesh and helps automate UV unwrapping and rigging, which prepare the surface for textures and the model for posing. Its character tools also support procedural animation and GLB/FBX export.
Sketch a stylised creature, make a small mascot, or create simple organic props to use in another scene. Exported assets can be refined in a larger modelling workflow or loaded into a compatible renderer or game engine.
Read further: Dust3D · sketching, rigging and export workflow GitHub
Projects to try
Sketch a small lab companion with an idle motion and a brief reaction when a calculation completes. A second project could create a family of stylised creatures or organic props for a playable laboratory scene. Start with one simple model, check its geometry and animation in the target viewer, and export a still version for thumbnails and reduced-motion viewing.
When to reach for it. Use it when its sketch-based workflow suits the form you want. Check the exported geometry and animation in the target viewer. Detailed machinery or precise scientific geometry will generally need a different modelling approach.
Quant-UX
Find out whether people understand a proposed interaction.
Browser prototyping and usability-research app
Quant-UX is an open source tool for building interactive prototypes and studying how people use them. Its research features include click heatmaps and views of the paths people take through a prototype. Those observations help identify missed controls, confusing screens and unexpected routes.
Compare proposed navigation layouts, try a new form flow, or evaluate whether participants can complete a specific task. Use the observations alongside their feedback to decide what to revise before committing to a full implementation.
Read further: Quant-UX · prototype analytics and user journeys GitHub
Projects to try
Prototype the weekly scheduler and ask participants to add two overlapping courses, move them to a term and find the Google Calendar export. Another study could compare two mobile tools-page layouts by asking people to find the darkness tracker and choose a date. Start with one task and a small round of feedback, using interaction paths and participant comments to guide the next revision.
When to reach for it. Use the hosted application or a self-hosted setup for prototype studies. Adding its name to the toolkit does not instrument the live website. A heatmap shows interaction patterns; it needs a clear task and user feedback to explain why those patterns occur.
A suggested first project
Make one small scene, from sketch to screen.
A chemistry tool thumbnail is a manageable first experiment: a flask with a short liquid-level animation, a clear title and a button that opens the tool. It connects design and 3D work while keeping the finished asset small enough to tune for mobile.
- Design the frame in Penpot. Draw the thumbnail at desktop and mobile sizes. Decide how the artwork, title and button fit together in both themes, including the still state.
- Make the asset in Blender. Model a simple flask and animate a short sequence. Export a compact GLB for interaction, or render a short video loop when playback is enough.
- Connect it with Three.js. For the interactive version, load the model when the card becomes visible and play its animation on hover, focus or a deliberate tap. Pause it off screen and respect reduced motion.
- Try the interaction in Quant-UX. Build a prototype of the card and its destination. Ask participants to find and open the chemistry tool, then use their feedback and interaction paths to refine the design. Check actual animation performance in the website separately.
Dust3D could supply a small character for a later experiment. Godot becomes useful if that character grows into a playable lab with stations, controls and progress. Those are natural follow-on projects once the first asset and interaction feel right.
A practical shortlist
Start with the experience.
Choose a tool for the interaction you want to make. Several of these libraries solve similar problems; a coherent result usually comes from giving each one a clear job.
| I want to build… | Start with | Why |
|---|---|---|
| Everyday layout and component changes | Motion | A direct fit for elements appearing, leaving, or changing position in React. |
| Buttons and draggable objects with a physical feel | React Spring + use-gesture | Gesture input describes the movement; a spring shapes the response. |
| A carefully timed or scroll-driven story | GSAP + ScrollTrigger | One timeline can coordinate many parts of a scene. |
| A small authored illustration | dotLottie or Rive | Use a prepared animation, or build artwork that responds to state and input. |
| A scientific chart or custom figure | Observable Plot, then D3 | Start with concise marks; reach for custom geometry when needed. |
| A geographic explorer | MapLibre, with deck.gl if needed | Separate the navigable map from large or specialised data layers. |
| A 3D model or scene | React Three Fiber | Connect a Three.js scene to React state and controls. |
| A workflow with several dependent steps | XState | Make valid states and recovery paths explicit. |
| Accessible menus, calendars and selection fields | React Aria; Floating UI for custom popups | Start with input and focus behaviour, then solve special positioning needs. |
| Moving courses between terms | dnd kit | Handle drop targets and keyboard interaction, then update the saved plan. |
| A smoother large course catalogue | TanStack Virtual | Render the visible rows rather than the entire catalogue. |
| A lab analysis readers can rerun | Pyodide + Plotly.js | Run compatible Python calculations and present interactive scientific plots. |
| Molecular structures or unit-aware calculations | RDKit.js / math.js | RDKit handles chemical structures; math.js handles mathematical expressions and units. |
| Recipes with structured ingredients | Cooklang + Ingredient Parser | Use explicit markup for new recipes and reviewed parsing for imported text. |
| A pantry or meal-planning companion | Open Food Facts / Mealie | Look up packaged products, or run a complete recipe and meal-planning service. |
| A photo gallery or a detailed scientific image | PhotoSwipe / OpenSeadragon | Use a lightbox for photos and tiled zoom for very large originals. |
| Better photo uploads and context | Cropper.js + exifr | Choose a thumbnail crop and read selected camera settings from the original. |
| Designing a consistent responsive page | Penpot | Work out components, spacing and colour tokens before implementing the page. |
| An animated model inside a project report | Blender + Three.js | Author the asset in Blender, then load it into a scene connected to the page controls. |
| A stylised character or small organic model | Dust3D | Sketch a mesh, prepare its movement and export it for a viewer or game. |
| A playable lab or pixel-art world | Godot Engine | Use a scene editor, game logic and a web export for a dedicated experience. |
| Checking whether a proposed flow makes sense | Quant-UX | Test a prototype with concrete tasks and inspect the paths people take. |
My first experiments for this site would be a faster course list with TanStack Virtual, a PhotoSwipe gallery, and one laboratory analysis that readers can rerun with Pyodide. Structured recipe quantities would be another useful step, making portion adjustments and shopping lists possible after the data has been reviewed.
16 possible next projects
Put the tools together.
These are project proposals for this website. Each combines tools with distinct jobs, from making an asset to presenting data or testing an interaction. Start with the first version described, then add complexity when the result earns it.
A chemistry thumbnail that comes to life
Turn the chemistry card into a small scene: a flask fills or gently rotates when the visitor explores it, then settles back into a clear thumbnail. The title and action stay readable, with a still version for reduced motion and a deliberate tap interaction on touch screens.
How the tools work together
- PenpotDesign the card, text placement and still state at desktop, tablet and phone sizes.
- BlenderModel a simple flask and export a compact model with a short animation clip.
- Three.jsLoad and play that asset inside the card, pausing it off screen and connecting it to the page controls.
A first version. One flask, one animation and one tool card. Check the exported asset on a phone before creating a whole set of animated thumbnails.
A night-photography field guide
Connect the Earth view, a local map and an evening timeline so visitors can compare candidate photography sites at a chosen date and time. Keep astronomical predictions, weather observations and historical light-pollution measurements separately labelled, including their sources and dates.
How the tools work together
- Three.jsRender the globe and its illumination using the site's astronomical calculations.
- MapLibre GL JSShow the chosen area, curated observation sites and appropriately licensed map layers.
- D3.jsDraw linked Sun and Moon altitude curves and highlight the selected photography window.
- deck.glAdd a regional measurement layer if the dataset becomes too large or specialised for simple map markers.
A first version. Compare two sites near LA on one date using the existing astronomy calculations. Add pollution and weather layers only once their coverage, licensing and update frequency are understood.
A laboratory report readers can rerun
Place a small analysis workspace beside a saved lab figure, letting readers adjust a fitting range or model parameter and compare the result with the original report. Show the code, inputs, units and saved reference result so the experiment remains understandable and reproducible.
How the tools work together
- PyodideRun the compatible Python analysis in a worker after the reader requests it.
- Plotly.jsPlot the measurements and recalculated curve with inspectable values and selectable traces.
- React AriaProvide labelled parameter controls, a clear run action and predictable keyboard navigation.
A first version. Use one existing lab dataset and one adjustable parameter. Match the saved result before introducing more models or user-provided data.
A molecule-to-spectrum learning notebook
Let readers choose a functional group, inspect a molecule containing it and explore an annotated reference spectrum beside the structure. A small calculation panel could explain a related conversion or equation; the spectral examples would be curated measurements or references, not automatic predictions from a drawing.
How the tools work together
- RDKit.jsRender the molecular structures and highlight the selected functional group.
- Anime.jsIntroduce a prepared SVG spectrum and its annotations in a short, replayable sequence.
- math.jsEvaluate the accompanying unit-aware examples and show intermediate quantities.
A first version. Three curated molecules and their sourced examples, with a static annotated view available before any animation plays.
A course workspace that feels direct
Bring the catalogue, weekly timetable and four-year plan into one consistent interaction pattern. Visitors could inspect a course, move it to a term and see exactly what changed, while overlapping meetings remain visible and course colours stay consistent.
How the tools work together
- TanStack VirtualKeep the long catalogue responsive by rendering its visible rows.
- dnd kitHandle course movement and valid drop targets, alongside the existing move-to-term control.
- React SpringSettle the final placement after a move, without competing with the drag controller's transform.
- Floating UIKeep course previews and unit details beside the selected block and inside the screen.
A first version. Move one course between two terms, with keyboard support and undo. Expand to the full plan only after selection, scrolling and saved data stay reliable.
A map of the courses that open doors
Give the course planner a visual companion showing which courses lead into a chosen subject. Selecting a node could reveal its prerequisites and later options, alongside a plain list that remains usable without navigating the graph.
How the tools work together
- Cytoscape.jsLay out the prerequisite network and highlight the selected course's connections.
- React AriaProvide an accessible course search and selection panel beside the network.
- PenpotWork out how the graph and details share space on a tablet or narrow screen.
A first version. A small sequence of courses checked against the official catalogue, including any alternatives or conditions. Do not infer requirements from graph position or course numbering.
A transcript import that explains every step
Make transcript import feel clear from file selection to the final reviewed course list. Visitors would see what was recognised, correct ambiguous matches and confirm what will be added before the plan changes.
How the tools work together
- XStateCoordinate reading, review, cancellation, saving and recovery from errors.
- React AriaSupply accessible dialogs, selection controls and focus handling through the review.
- dotLottiePlay a short progress or confirmation illustration tied to the actual operation state.
A first version. Improve the review of one supported transcript format, showing duplicates and unmatched courses explicitly. Animation should reflect progress, never delay it.
A pantry companion for packaged ingredients
Let visitors enter a product barcode, review its available label information and attach it to an ingredient in a planned meal. Missing fields and uncertain matches would remain visible rather than being filled with assumptions.
How the tools work together
- Open Food FactsSupply available product images and recorded label information with source links.
- React AriaProvide a labelled lookup form and a clear result-selection interaction.
- XStateCoordinate loading, no-match, review and save states without losing the entered barcode.
A first version. Manual lookup and review of one product at a time. Camera scanning can follow later as a separate feature; product records do not guarantee allergen safety.
A photographic field-notes atlas
Combine a curated location map with uncropped photographs and a short explanation of how each shot was made. The upload workflow would prepare intentional thumbnail crops and let the editor choose which camera settings and location information become public.
How the tools work together
- PhotoSwipeOpen complete images from their thumbnails and let readers browse a related sequence.
- exifrRead available exposure settings for editorial review before publication.
- Cropper.jsPrepare consistent cover crops while preserving the original image.
- MapLibre GL JSConnect each story to a deliberately chosen public location or general area.
A first version. One six-photo story with manually approved captions and metadata. Keep precise GPS information private unless the editor deliberately chooses to publish it.
A microscopy observation desk
Pair a detailed laboratory image with plots describing its documented observations. Readers could select a labelled region, inspect it at higher resolution and see the corresponding measurement group without losing the overview.
How the tools work together
- OpenSeadragonDisplay the prepared tiled image and keep documented region markers aligned while zooming.
- Observable PlotPresent the related measurements as consistent small multiples or distributions.
- React AriaOffer a keyboard-accessible region selector and reset controls beside the image.
A first version. One image, three regions and a verified table linking them to measurements. Include a calibrated scale only when the source provides enough information.
A scroll-through journey inside the reactor
Turn the gasification case study into an illustrated explanation of how material moves through the apparatus. The reader could progress from the whole system to individual components, then pause and inspect a selected part, with the original report still available as ordinary text and figures.
How the tools work together
- BlenderAuthor the simplified reactor, internal parts and exportable materials.
- React Three FiberConnect the Three.js scene, selected component and report controls through React.
- Theatre.jsAuthor the camera and component sequence on a visual timeline.
- GSAP & ScrollTriggerUse ScrollTrigger to drive that sequence's progress and coordinate the surrounding text, with one owner for each animated property.
- LenisOptionally synchronise editorial scrolling after the story works with normal browser scrolling.
A first version. A three-part cutaway with a manual progress slider. Add scroll control only once the exported model, explanations and mobile still view are clear.
A small laboratory you can walk around
Build an optional playable lab where a small character visits experiment stations and opens brief experiment explanations. The website would introduce the experience and load it on demand, with normal report links available to anyone who prefers to read directly.
How the tools work together
- Dust3DSketch and export a simple companion character, checking the exported animation in the target scene.
- BlenderModel a few lightweight props and refine assets that need a more detailed workflow.
- Godot EngineBuild the room, controls, interaction rules and compatible browser export.
A first version. One room, one character and one experiment station. Test loading, keyboard and touch controls on the web before building a larger world.
A shared language for buttons and themes
Give the site a coherent set of responses: buttons acknowledge presses, the theme changes from the sun or moon icon, and an illustrated helper reacts to meaningful events. Each effect would have a clear owner so repeated input can interrupt or complete it without overlapping renderings.
How the tools work together
- React SpringHandle restrained hover and press responses on the actual buttons.
- View Transitions APICoordinate the page-wide colour reveal around the icon's measured position, with a direct fallback.
- RiveAnimate a separate illustration whose state follows the chosen theme or a completed calculation.
- XStateCoordinate the interaction states if interruptions and dependent steps become complex enough to need it.
A first version. One contact button and one theme switch, checked under repeated taps, keyboard input and reduced motion. Introduce the illustrated helper only after the controls feel reliable.
A pocket physics bench
Make a small 2D scene where visitors move weights, balance a beam and reset the experiment. Use it to invite exploration of a simplified model, with its assumptions explained and numerical results presented as illustrative until independently validated.
How the tools work together
- Matter.jsCalculate rigid-body motion, collisions and constraints.
- PixiJSDraw the apparatus and sprites using positions supplied by the physics simulation.
- use-gestureTranslate deliberate pointer or touch gestures into input for the scene, alongside ordinary buttons.
A first version. A beam, two weights and a reset control. Keep input handling separate from the physics update, and provide controls that do not require dragging.
A design study before the next redesign
Compare two proposed layouts for finding tools or exporting a weekly schedule before rebuilding those pages. Define a concrete task, observe where participants go and ask what they expected; treat the observations as guidance for the next iteration rather than proof that one layout works for everyone.
How the tools work together
- PenpotDevelop the visual layouts and reusable components at the intended screen sizes.
- Quant-UXRecreate the relevant flow as a testable prototype and inspect participant paths, clicks and feedback.
A first version. Two mobile layouts and one task, such as selecting two courses and finding the calendar export. Test the resulting implementation separately for performance and accessibility.
For a first design and animation project, I would start with the chemistry thumbnail: Penpot for its layout, Blender for the asset and Three.js for the interaction. For a useful addition to an existing page, a rerunnable laboratory figure or the photography gallery would make a focused next experiment.