简体中文
EnglishWebsite review
This review may include AI-generated content and is not individually verified. Domain, certificate and other facts come from the observed data on this page.
What is brm.io?
brm.io is the personal project site of developer @liabru, a senior software engineer working in product, web, and front-end development in London. Rather than a company or a hosted service, it is a portfolio-style home for open-source libraries, browser experiments, and technical writing. The page lists work such as the Matter.js web physics engine, the matchHeight responsive equal-heights library, Fractal Gears, Kwyjibo real-time OCR, and a lighter theme for dat.gui.
What you'll find there
- Libraries and tools you can adopt in your own projects, such as a physics engine for web animation and a utility for matching element heights in responsive layouts.
- Experiments and demos, including generative animation and in-browser OCR, which are useful for seeing what is technically possible before committing to an approach.
- Front-end writing, for example notes on Material Design typography in CSS, aimed at developers solving layout and styling problems.
- Links out to code and contact, including GitHub and CodePen, so you can inspect source or follow the author's work.
Who it is for
The site suits front-end and creative developers looking for reusable JavaScript libraries, physics-based animation, or practical CSS techniques. Designers and technical leads may also find the demos helpful for judging feasibility. It is less relevant if you need a commercial product with support contracts, since the material is presented as an individual developer's projects.
How to use it
Start with the project that matches your immediate problem: a physics engine if you need realistic motion, or an equal-heights utility if you are fixing responsive card layouts. Check each project's own documentation and repository before adopting it, since maintenance and browser support will vary by project. If you want to compare the author's broader output or follow updates, the GitHub and CodePen profiles linked from the site are the practical next step.
What is Matter.js and how is it used?
Matter.js is a 2D rigid-body physics engine for the web, created by Liam Brummitt (@liabru) and listed on his personal site code by @liabru. It simulates gravity, collisions, friction, restitution and constraints in JavaScript, so objects in a page or canvas behave with plausible weight and momentum rather than following hand-authored animations. The site presents it simply as the "web physics engine," alongside the author's other projects such as matchHeight and Fractal Gears.
What it does
You define bodies — rectangles, circles, polygons or compound shapes — give them properties like mass and friction, add constraints such as springs or hinges, and let the engine step the simulation forward each frame. Because it handles the maths of contact and response, you can build interactive scenes without writing a collision solver yourself.
How it is typically used
- Games and toys: stacking blocks, ragdolls, projectile puzzles, destructible structures.
- Interactive interfaces: draggable objects, bouncing UI elements, playful loading screens.
- Visualisations and art: generative motion pieces, particle-like scenes with real collisions.
- Prototypes: testing whether a mechanic feels right before investing in a full engine or 3D approach.
It is commonly paired with a renderer — either Matter.js's own canvas renderer or a custom draw loop — and with a framework such as React or plain JavaScript for the surrounding UI.
Practical trade-offs
| Choose Matter.js when | Look elsewhere when |
|---|---|
| You want 2D physics with a small API and quick setup | You need full 3D physics |
| Objects are simple shapes or compounds | You need soft-body, fluid or cloth simulation |
| You want collisions and constraints, not photorealism | You need a complete game engine with scenes, audio and asset pipelines |
Performance depends on the number of bodies and how often you step the world; many small objects with continuous collision checks will cost more than a handful of large ones.
A concrete scenario
A developer building a puzzle game where the player drops shapes into a container can use Matter.js to handle stacking, tipping and settling, then read each body's position and angle to decide whether the level is solved. The physics does the hard part; the game logic stays simple.
Next step
Open the Matter.js documentation and run a minimal example: one ground body, one falling box, one render call. Once that runs, add a constraint and a mouse drag to feel how the engine behaves before committing to a larger design.
How does matchHeight help with responsive equal-height layouts?
matchHeight solves a specific, narrow problem: making a row of elements share the same height when their content naturally differs. On code by @liabru, it's listed alongside the author's other projects as a "responsive equal heights" library, which is the clearest signal of its intent — it recalculates and equalises heights as the viewport changes, rather than only at page load.
What it actually does for you
- Equalises a group, not everything. You point it at a selector (typically a set of cards, columns or list items) and it makes every matched element as tall as the tallest one in that group. Independent groups stay independent, so one long card doesn't stretch an unrelated section.
- Reacts to resizing. Because content reflows when the window narrows or widens, a one-off height fix goes stale. A responsive equal-heights library re-measures on resize, which is the main reason to use it instead of a single line of JavaScript.
- Keeps the layout honest. The visual result is a clean baseline across a row, which matters most when cards contain variable text, tags or thumbnails.
When it's the right tool
Use it when your layout is row-based and you want equal heights within each row: pricing columns, product tiles, blog post summaries, dashboard widgets. It's a small, focused dependency rather than a full layout framework, so it fits projects that don't want to adopt a grid system just for this.
When to reach for CSS instead
Modern CSS handles many of these cases without JavaScript. If your cards sit in a flex row, align-items: stretch (the default) already equalises them. If they're in a grid, grid-auto-rows: 1fr or stretching grid items does the job. The trade-off:
| Approach | Best for | Trade-off |
|---|---|---|
| Flexbox stretch | Simple single-row card groups | Wrapping rows equalise per line, which may or may not be what you want |
| CSS Grid with equal rows | Predictable multi-row grids | Requires the grid structure up front |
| matchHeight-style JS | Rows built from floated or inline-block elements, or layouts you can't restructure | Adds a script and a resize listener; heights are set after measurement |
A concrete decision
If you're maintaining an older layout built on floats or inline-block, or you need equal heights across a row whose items wrap unpredictably, a JS equaliser is often the least invasive fix. If you're building fresh markup, try the CSS route first — it avoids the flash of unequal heights before the script runs, and it keeps working if JavaScript fails.
Next step: open the project page on code by @liabru, check the usage example against your own markup, and test it at a narrow width to confirm the re-measurement behaves as you expect.
What is Fractal Gears and what kind of generative animation does it create?
Fractal Gears is one of the generative animation experiments listed on code by @liabru. It sits alongside other motion and graphics projects such as Matter.js and Kwyjibo, but it is best understood as a creative-coding piece rather than a library or product: a self-contained visual experiment that produces animated, gear-like geometric motion.
Based on the name and the site's grouping of it as a "motion experiment," it most likely generates repeating, recursive gear shapes whose rotation and scaling create a fractal, hypnotic effect. That means the animation is procedural — the patterns are computed, not hand-drawn — and it plays continuously with nested or self-similar forms.
Who it suits
- Developers and designers looking for inspiration for canvas or WebGL animation.
- Anyone studying how simple rotation rules can produce complex, evolving motion.
- People who enjoy generative art and want a short, visual demo rather than a tool.
How to use it Open the experiment on the site to watch it run, then view the page source or the author's related code links if you want to understand the technique. As a practical next step, note the motion principle — repeated rotation at different scales — and try reproducing a simplified version with a canvas loop. That exercise is more useful than copying the exact visuals.
One trade-off: like most generative experiments, it is meant to be watched and learned from, not integrated into production apps. If you need physics or layout behavior instead, the same site's Matter.js and matchHeight projects are the more practical starting points.
How does Kwyjibo perform real-time OCR?
Kwyjibo is listed on this site as a "Real-time OCR" project, but the page evidence does not describe its implementation, so the specific method it uses isn't stated here. What can be said is that the site positions it as an experiment alongside other browser-based demos, which suggests it runs in a web context rather than as a server-side document pipeline.
In practical terms, real-time OCR in a browser usually means capturing frames from a camera or canvas, converting them to a form a recognition engine can read, and running recognition repeatedly as new frames arrive. The trade-offs are latency versus accuracy: running on every frame gives faster feedback but costs more CPU and can produce flickering, unstable text, while running on a throttled interval or only when the image changes gives steadier results at the cost of responsiveness. A reader evaluating Kwyjibo should check whether it recognizes text continuously or on demand, how it handles low-contrast or rotated text, and whether processing happens locally in the browser or via a remote service.
If you want to understand the approach, the most reliable next step is to open the project from the site and test it with a known document, such as a printed page under ordinary room lighting, and watch how quickly the recognized text stabilizes. For background on the broader ecosystem, GitHub hosts the source and issue history for many OCR projects, and Tesseract.js demonstrates browser-based OCR you can compare against.
How can I contact or work with @liabru?
The site is the personal project hub of @liabru, a senior software engineer working on product, web and front-end development, based in London. It is a portfolio of code and experiments rather than a company or agency site, so the practical route to contact or collaborate is through the links listed on the page itself.
Ways to reach or work with @liabru
- Contact link: The page includes a "contact" link among its main navigation items, alongside about, github and codepen. That is the intended starting point for enquiries.
- GitHub: The page links to a GitHub profile, which is the natural place for code-level questions, bug reports and pull requests — particularly relevant given projects like Matter.js, a web physics engine.
- CodePen: A CodePen profile is also listed, useful for discussing the front-end and animation experiments shown on the site, such as Fractal Gears.
- About & work: The "About & work" and "About & Work →" sections describe his background and details, which is where to check before making a work enquiry.
What the portfolio suggests he works on
The listed projects span several areas, which helps frame what a collaboration might involve:
| Project | Area |
|---|---|
| Matter.js | Web physics engine |
| matchHeight | Responsive equal heights library |
| Fractal Gears | Generative animation experiment |
| Kwyjibo | Real-time OCR |
| Game physics from scratch | Physics/game experiment |
| Material Design Typography in CSS | CSS/typography |
| A lighter theme for dat gui | Tooling/UI theming |
Practical next step
If you have a specific proposal, lead with the project it relates to: a physics-engine bug or integration question belongs on GitHub, while a UI or animation collaboration is better raised through the contact link or CodePen. A short message naming the relevant project and the outcome you want will be easier to act on than a general "let's work together" note. For context on the open-source libraries mentioned, their repositories are the best place to confirm current maintenance and contribution guidelines.
Google LLC
User reviews (0)