Loopwrightpinned
Turn any repo into a changelog anyone can read
protected
loopwright.devThe dinorun.lol design library
Every piece on its own, before any of it gets assembled into a page — what it is, why it is built that way, and what it shows. Flip the theme and everything below changes with it. This screen becomes the Design tab in admin.
Built by Hamza Ali Shahjahan · @HamzaAli_ on X
Bright side-scroller. Blue sky, green hills.
Logo
Brand
Dino, builder on the reins, .lol set apart. Same art as the stage — never drifts.
The mark carries both characters rather than the dino alone, because the rider is the whole idea — this is a runner for builders, and a builder is the thing that makes it not the offline dinosaur. The word drops away below 430px, where the mark alone is still recognisable and the space is needed by the buttons.
dinorun.loldinorun.lol
dinorun.lol
Dino
Characters
Chunky blocks, not smooth curves — that is what survives at 40px.
Drawn as chunky overlapping blocks rather than smooth curves. That blockiness is what makes it read as the offline dino at 40 pixels, and it is what survives a palette swap into Mario or Synthwave without becoming a different animal. The brow does the work: a right-facing profile reads as determined when the brow drops toward the snout.
Pose
Builder
Characters
The hard hat is the identifier. Giddyup raises the far arm.
Built from thick round-capped strokes rather than filled outlines, because at the sizes this renders — often under 60 pixels in the logo — strokes stay readable where filled shapes turn to mush. The hard hat does the identifying: it is the one shape that still says "builder" in silhouette, at 24 pixels, in any of the three palettes.
Arm
Rider
Characters
Composed in one SVG so the reins genuinely connect. The builder's bob lags the dino's gait — that delay is what reads as riding.
They share a single coordinate space on purpose: the reins are a real path from the builder's hand to the dino's jaw, so they stay connected through every pose and every size. Two separate drawings positioned next to each other cannot do that without the reins drifting. The collision shape used by the game is traced from this drawing.
PoseArmEyesBoostSpeed
Background layers
World
Each layer alone, at its own scroll speed. Far is slowest; ground is fastest.
Separate layers moving at different speeds are what turn a flat backdrop into distance. They are shown individually here because a layer that looks right in the stack can be wrong on its own, and the one that is wrong is invisible until you separate them.
far
mid
near
ground
Stage
World
All layers plus the rider. Toggle layers off to see what each one contributes.
A fixed virtual world of 1000 by 440 units, scaled to whatever size it is rendered at, so the game plays identically on a phone and a widescreen. A game whose difficulty depends on the viewport is a different game per device.
Biome
Run states
Characters
What actually turns each face on. Focused is earned by surviving and never goes back; turbo is earned by collecting and wears off.
The slide is the one that matters structurally. The builder flattens forward along the neck, which is the entire reason overhead obstacles work — the rider is what makes this animal too tall to duck under scaffolding while standing.
calm
Default. Round, blinking, friendly.
Starts: Start of every run
Lasts: Until the score threshold
focused
Brow drops toward the snout. Determined, still readable at 40px.
Starts: Crossing the difficulty threshold (~300 pts — tunable)
Lasts: Rest of the run. Never reverts.
turbo
Narrowed, brow harder, pupil burns accent-coloured with a halo.
Starts: Collecting a Turbo pick-up
Lasts: ~6 seconds, then back to focused
Power-ups
Game
Spawned at jump height in the obstacle stream, so collecting one is a skill act. Earned only — never purchasable (see the Rules modal).
A badge reads at 28 pixels against a busy moving background where a bare glyph does not — the ring gives it an edge the scenery cannot swallow. They bob so the eye catches them as objects rather than scenery, and they spawn at jump height so collecting one is a skill act rather than a walk-into.
Turbo · ~6 seconds
Runs faster, smashes through obstacles instead of dying to them, score counts double.
Ship it. This is the one that earns the turbo eyes.
Hard hat · Until it takes a hit
Absorbs exactly one hit, then shatters. The run continues.
Ship it. The hat is already how you recognise the builder — this makes it mean something.
Coffee · ~4 seconds
Slows the world for a few seconds. Not faster — more reaction time.
Hold. A third pick-up is scope before you know the game is fun.
At the size they are played at:
Boost effects
Game
Three different answers to 'how do you say fast'. Pick one before the game depends on it.
Speed has to be legible without reading the score. The eyes escalate rather than merely change — calm, focused, then turbo, where the pupil burns the accent colour — so the mood is a scale a player feels rather than three unrelated faces.
lines
Speed streaks. Cheapest to draw, reads instantly, never obscures the character.
flames
Exhaust at the heels. Most physical, but adds a warm colour every theme must carry.
afterimage
Ghost trail. Most expensive — three dinos on screen — and the most "fast".
Speed tiers
Game
The effects are earned by speed, not by a pick-up. Someone who never finds a turbo should still see the world tell them how fast they are going.
The boost effects used to be reachable only through a pick-up, so a player who never found one never saw them however fast they got. Speed is what the run is actually about, so speed is what pays them out — the world tells you how quick you are going instead of a number in the corner. Thresholds are multiples of the settled speed rather than absolute numbers, so they follow it instead of needing re-tuning every time it moves. The top tiers also pay double, which is what pulls the last rung within reach of a run somebody might actually have.
cruise · 1.00× · 960 units/s
no effect yet
streaks · 1.15× · 1104 units/s
lines
ghosting · 1.40× · 1344 units/s
afterimage
burning · 1.75× · 1680 units/s
flames · double points
wheels · 2.20× · 2112 units/s
flames · legs become a wheel · double points
Thresholds are multiples of the settled speed, so they follow it rather than needing re-tuning whenever it moves. The top tiers pay double, which is what pulls the last rung within reach of a run somebody might actually have.
The camera
Game
Warning time is the view's width divided by the speed. With a fixed view it shrinks as the run gets faster, so the view widens instead.
Warning time — how long an obstacle is on screen before it reaches you — is the view's width divided by the speed, so with a fixed view it SHRINKS as the run gets faster. Measured, it fell to 0.40 seconds against the 0.7 a person needs just to see a thing and press. The view widens instead, and obstacles enter at its edge; both halves are needed, because a thing you cannot see yet is not a warning. The cost is a smaller dino at speed, and the pull-back stops at half size, because an unreadable character is a worse problem than a tight reaction.
cruise
1042 wide · 96%
streaks
1164 wide · 86%
ghosting
1368 wide · 73%
burning
1654 wide · 60%
wheels
2000 wide · 50%
The bar is how much of the widened view the original screen covers — so a shorter bar means more road on screen and a smaller dino. It stops at half, because an unreadable character is a worse problem than a tight reaction.
Obstacles
Game
Three things an obstacle can ask of you — jump it, duck under it, read its height. Every world draws its own version of all three.
Jump it, duck under it, or read its height — that is the whole vocabulary, and those timings are tuned against a five-minute playtest. What changes between worlds is what the thing IS: a cactus, a car and a cybertruck are all "jump this". Nine obstacles that each behaved differently would mean re-earning that tuning nine times. Every shape fills its own collision box exactly, because when the art was drawn in a different coordinate space the boxes ended up twice as tall as the pictures and runs ended with nothing on screen. What you see is what kills you. One exception proves that rule rather than breaking it: the alien ship closes at 1.7x the world speed, so it overtakes the grid it crosses instead of drifting with it. It launches from 1.7x further out, which cancels exactly — more ground covered, same reaction time as everything else.
World
one
wide
Cactus · Snake
Cleared by: Jump
One or two wide. Three plus the rider was more overlap than a jump could cross at the slowest speed.
Rock arch
Cleared by: Slide
Solid from the ceiling down to a gap you can only take flat. It is a threat at all because the builder makes the animal too tall to run under. In the grid it is an alien ship, and the only thing on the stage that closes faster than the world — it flies in rather than being carried in.
high
mid
low
Bird
Cleared by: Depends on its height
High = run straight under · mid = slide · low = jump. The only obstacle you must read before you commit.
Biomes
World
What changes as a run goes on. Biome is progression WITHIN a run; theme is the skin you chose — a biome never overrides your theme.
Progress you can see is worth more than a number going up. The biome switch is the reward for surviving, and it arrives at fixed scores so two players comparing runs are describing the same milestones.
Ground level · from every world · Follows the day
Uptown · from review only · Follows the day
Highland · from review only · Follows the day
Sponsor placements
Commerce
One rule: no sponsor asset ever sits in the near layer or on the ground line. That is the play line.
Advertising inside a game is either part of the world or a tax on playing it. These are part of the world — a plane trailing a banner, a roadside billboard — except the death card, which is deliberately the highest-attention surface in the product and therefore the one worth the most.
Banner plane — paid pin
Far layer, slowest scroll, never in the play line. A logo on a cloud is tiny and dies in a monochrome theme; a towed banner carries a wordmark at that distance.
Billboard — free listing
Mid layer: behind the play line, in front of the horizon. Rotates through the board.
Death card
Game
The highest-attention surface in the product — the player just failed and is about to tap again. Exactly one sponsor line.
The most-read surface in the product, because it is the only moment a player is stopped and looking. It carries the score, what they were close to achieving, and a single button back into a run. The sponsor line sits under all of that, never over it.
Run over
412
best 1,180
- Clear 5 beams in one run3/5
- Survive 60s without the hard hat1/1
- Collect 3 turbos0/3
this run powered by your product
Sponsor slots
Commerce
Three equal slots under the game. Equal width on purpose — a pecking order at one flat price is a complaint waiting to happen.
Three of the same size rather than one big and two small, so nothing about the layout implies a ranking that money did not buy. An empty slot holds the exact size a filled one takes, so the page never jumps when a sponsor loads.
$50 for 7 days. The buyer pastes a link and we fetch the name and description; the tagline is theirs to override. The pay button is never gated on that fetch — a slow third party must not become an outage in our checkout.
Bid ladder
Commerce
Five slots that do not sink. An open auction from $1 — the entry price is derived, never typed by us.
An auction where you cannot see what a bid achieves is a request to guess. The stepper names the rank at every amount, so the decision is made before the card comes out rather than discovered after.
The top 5 don’t sink
Hold a protected slot and your listing stops decaying for 24 hours. Everyone else keeps sinking.
- 1Loopwright19h left$12
- 2Quietport11h left$7
- 3Halfmoon Analytics22h left$4
- 4Fernpost6h left$3
- 5Cardamom2h left$1
A slot is a 24-hour window, not a freehold — otherwise the first five payers own the board forever and the auction dies on day one. Outbid, or let the window lapse, and your listing starts sinking again.
Entry right now is $2 — one dollar above the lowest protected bid. Free slots price at $1.
Stats
Stats
Headline numbers, so stat tiles rather than charts. One hero figure; the rest are tiles. Direction never rides on colour alone.
Headline figures rather than charts — one value per question, so a tile is the right form and a plot would be decoration. Changes never rely on colour alone: each carries an arrow and a named period.
Visitors since launch
128.4K
Online now
47
Listings live now
12
Listings
Commerce
One row. The heat bar is the persuasion — a listing you can SEE sinking is why anyone comes back to re-up.
Every row uses the same invisible columns, so the countdown sits at exactly the same place whatever the product is called and however long its link is. A row where the important thing moves depending on the text is a row you have to read twice.
Fernpost
A newsletter tool that refuses to add a CRM
2h 42m left
fernpost.comQuietport
Status pages that tell the truth automatically
2h 16m left
quietport.ioBramble
Local-first notes with a real outline mode
1h 48m left
bramble.appThe board
Commerce
Sits under the game and is read BETWEEN runs — nobody can scroll a one-touch runner without dying.
One board, not two. Paid slots hold the top and do not count down; free listings rank by time remaining, so the board shows what is being maintained rather than what arrived first. It scrolls to fifty and then pages, because a list that scrolls forever is a list nobody reaches the bottom of.
The board
Free to list. Every listing runs a 24-hour clock — add yours again to reset it. Paid slots hold the top and never count down.
Loopwright$12
Turn any repo into a changelog anyone can read
19h held
held
Quietport$7
Status pages that tell the truth automatically
11h held
held
Halfmoon Analytics$4
One number per day, emailed. Nothing else.
22h held
held
Fernpost$3
A newsletter tool that refuses to add a CRM
6h held
held
HUD
Game
Score and live power-ups. Top edge of the stage — the only place a readout goes without entering the play line.
Deliberately quiet. It sits in the corner at low contrast until something changes, because the score is a thing you glance at between obstacles and never a thing you read while one is arriving.
00412HI 01180
Brand slots
Commerce
Space is reserved empty or filled, so a late-loading sponsor never shoves the game down.
Shown empty and filled side by side, because the only thing that matters about an ad slot is that it is the same size either way. A slot that grows when it fills is a layout shift with a price tag.
Leaderboard 970×90
your brand here
Leaderboard 728×90
your brand here
Mobile banner 320×50
your brand here
Modals
Page chrome
One component, four contents. ESC closes, focus returns, the back button closes instead of leaving.
This is where the product keeps its one structural promise. Every internal destination is a modal over the page you are already on, so reading the rules never destroys a run. Escape closes, focus returns to what opened it, and the back button closes it instead of leaving the site.