Video wird geladen...
Video konnte nicht geladen werden
GLM 5.1 vs GLM 5.2 6 advanced HTML canvas challenges: 💧 Ink diffusing in water ⚔️ Energy-blade duel 📱 Slide to unlock 🅿️ 360° parking assist 🔥 Burning letter to ash 🏠 Build-a-house sequence Pure canvas, zero libraries.
347,708 Aufrufe • vor 3 Monaten •via X (Twitter)
48 Kommentare

glm5.1 lightsaber duel is sweet

Yeah especially when they crossed!

dang dude great visuals and choreography.

Glad you liked the rhythms!

The prompt (1/2): 💧 Ink diffusing in water Create a single HTML file with a canvas animation of a single drop of black ink falling into a glass of clear water and diffusing. On impact the ink should bloom outward in turbulent, billowing plumes — fractal tendrils curling and branching as they spread and slowly disperse into faint clouds. Use real fluid-like motion (advection and diffusion), not simple expanding circles. The ink should have density variation, with dark dense cores and wispy translucent edges. Soft lighting from above. 60fps, no external libraries. ⚔️ Energy-blade duel Create a single HTML file with a canvas animation of a short, cinematic duel between two hooded warriors wielding glowing plasma blades — one blade blue, one red. Set it on a dark, atmospheric backdrop with drifting embers or mist. The warriors clash in a fast, choreographed exchange of swings and parries. The core effect: each blade leaves a smooth, motion-blurred light streak that traces its arc through the air, with a bright white-hot core, a colored glow, and a trail that fades over a few frames. Blades should cast dynamic colored light onto the fighters and the ground, and clashes throw off sparks. Fluid, weighty movement — no stiff robotic motion. 60fps, no external libraries. 📱 Slide to unlock Create a single HTML file with a canvas animation of a smartphone lock screen unlocking. Show a phone screen with a large clock and date over a soft gradient wallpaper, and a "slide to unlock" track at the bottom with a draggable handle. A shimmering light sweep should animate continuously across the "slide to unlock" text (a moving highlight gradient). Then animate the handle sliding all the way across; on completion, the lock screen smoothly slides/fades away to reveal a home screen — a grid of rounded app icons (original designs) that gently zoom and fade into place, with a subtle parallax on the wallpaper. Polished, fluid, Apple-grade easing throughout. 60fps, no external libraries. 🅿️ 360° parking assist Create a single HTML file with a canvas animation simulating a modern car's 360° surround-view parking assist as it parallel-parks into a tight roadside gap (the classic S-shaped maneuver). Layout: Split the screen into two panels. The left panel is the car's infotainment display showing a top-down bird's-eye ("around-view") composite — the car rendered from directly above in the center, the road surface and curb, and an empty parking gap bracketed by two parked cars. The right panel shows the steering wheel from the driver's seat, rotating in sync with the maneuver. Dynamic guidelines: Overlay predicted-path lines projecting from the car in the bird's-eye view — two curved trajectory lines marking the car's width, divided into colored distance bands (green = far, yellow = mid, red = close). These lines must bend left or right based on the current steering angle using correct steering geometry (sharper wheel angle → tighter turn radius), and they must update every single frame as the wheel turns and the car moves. Animation: Auto-play the full parallel-parking sequence — drive forward alongside the front car and stop, crank the wheel and reverse while curving in, then counter-steer and straighten as the rear end clears, and finally ease forward to center in the spot. The car body should trace a smooth, continuous S-path. Critical constraint: The steering wheel rotation, the curvature of the guidelines, and the car's actual path must stay perfectly consistent with one another at all times — turn the wheel left, the guidelines bend left, the car arcs left. Add subtle UI chrome (a distance readout, proximity warning arcs that flash red as the car nears the parked cars), soft shadows, and clean flat-design styling like a real car display. 60fps, no external libraries.

The prompt (2/2): 🔥 Burning letter to ash Create a single HTML file with a canvas animation of a handwritten letter burning. Show an aged, slightly yellowed sheet of paper with visible handwritten cursive text (procedurally drawn lines are fine) resting on a dark wooden desk. After 2 seconds, a flame ignites at the bottom-right corner and spreads organically across the page — the burn front should advance with an irregular, noisy edge, never a straight line. Just ahead of the flames, the paper should darken and brown (scorching), then char black, then disappear entirely, revealing the desk beneath. Render the fire with layered particles: a bright white-yellow core, orange mid-flame, and translucent red tips that flicker and lick upward. Glowing embers should detach from the burn edge and drift upward on turbulent air currents, fading from orange to gray. Add wisps of semi-transparent smoke rising and dispersing above the flames, and a warm flickering light that the fire casts onto the surrounding desk. The entire page should be consumed in roughly 15 seconds, leaving only a few glowing ash fragments that slowly dim. 60fps, no external libraries. 🏠 Build-a-house sequence Write a single HTML file with a full-page canvas, no libraries. Animate the construction of a simple 2D cartoon house in 7 stages over ~25 seconds against a pale blue sky with a green ground line: (1) foundation - a gray rectangular slab rises from underground, (2) walls - four vertical wall segments extend upward from the foundation corners, (3) wall fill - tan/beige siding fills in between the wall frames, (4) roof - two triangular roof panels slide in from above and meet at the peak, with red shingle texture appearing row by row, (5) door - a brown door fades in on the front wall with a small gold doorknob, (6) windows - two windows appear on either side of the door with visible cross-frames and blue glass, (7) details - a chimney extends up from the roof, a small puff of smoke begins rising from it, a path of stepping stones appears leading to the door, and a small tree grows beside the house. Each stage should have a brief caption at the top ("Laying foundation", "Raising walls", etc.). Between stages, pause for 0.5 seconds. Loop continuously.

I've started repeatedly prompting 5.2 the same prompt, and found wildly different results. I think we are getting to a point where we will have to start measuring with averages.

Maybe try lowering the temperature?

Depends on what I'm doing. It's nice to get examples to chose from. But I'm concerned with single comparisons between last and next model versions, without lots of repeat comparisons. That takes a lot of time. I guess I could just automate it. GLM is my main three.js llm.

how is 5.1 better at pretty much everything

love the visualisations! im pretty sure i'd get a ticket if i parked like glm 5.2 tho

Appreciate it! Yep, two wheels on the pavement haha

I would think that 5.1 is actually 5.2; otherwise it seems like a regresion in some cases

I prefer 5.1 on most of these!

Honestly, GLM 5.1 remains one of the strongest open-source models for this kind of creative coding. Still love it.

that looks so cool for comparison

i feel like it lowkey did worse on the old iphone animation and the house building animation was super botched

Glm 5.1 seemed to be more more detailed in generated outcome may it be the tweaks they did to glm 5.2 for speed at sacrifice Over quality ?

There are some aspects of 5.1 that I almost like better

Example tests cannot fully reflect the full picture; actual work tests are still needed.

@francoisfleuret

I don't know but I like the taste of glm it feels the close to Claude type

those are all not 1shot results, because I've done the paper part and it didn't turn out like this

They are one shot, with the same prompt per model run 5 times, and the best result was selected for each model.

that explains it

super satisfying. one day it will plan out and build a real house project from the ground up :D then control the robots that actually build the house :D

love the ideas 🤩

so good

The improvements are subtle, but I like it

👍🏻👍🏻 Thanks

I love your test everytime Displays a Lot

Very interesting set of tests

GLM 5.2 is much better on the ink diffusing and burning letter IMO, otherwise not so much.

Thanks for this, great work!

Love this tests

Great visualizations thanks!

can you share the prompts?

Sure, I have added to this post as comments, please check.

awesome 🙌

Building AI Video Editor on GLM 5.2 from yesterday. 0 repos - everything from scratch.

Wow how was it?

I wish to plug this editor to AI camera I’m working on also.

Wow! GLM 5.1 is not outdated yet 😁

Software tasks are very small portion of all possible use cases. Consider tasks that are not easy to verify. You must enlarge your vision about model testing, if you want to distinguish yourself.

Not a real improvement 😅

Are you going to release your testing software that you use for all of these videos? Just curious

It's a simple web app that renders the result, I can add that to BenchLocal.

Awesome! I look forward to it, I want to do this testing with all my own wacky prompts
