/** * The scroll meter: a horse walking home to the barn. * * Self-contained. To remove the whole component, delete this file, * assets/js/scroll-meter.js, and the marked block in functions.php. * * Decorative and inert: pointer-events are off, so it never takes a click * meant for the page beneath it, and the markup is aria-hidden. * * A strip across the foot of the window, at every width. It was a small * bordered panel in the bottom-left corner for a while, which looked tidy in * isolation and did not work: a 150px panel is a diagram of a journey, and * a strip the width of the window is the journey, with the quarter marks far * enough apart to be read at a glance rather than squinted at. * * --rh-meter-inset is the breathing room at each end of the run. */ .rh-meter { --rh-meter-inset: var(--wp--preset--spacing--30, 1rem); position: fixed; right: 0; bottom: 0; left: 0; z-index: 45; display: none; /* Was 50. The extra fourteen is sky — everything else in here is measured up from the ground, so the scene is unchanged and the room goes above the treeline where it belongs. */ height: 64px; pointer-events: none; opacity: 0; /* Waking is a very quick fade up — long enough to be a fade rather than a switch, short enough that it is never in the way of the scroll that asked for it. Going away is the staged fade further down, which the container takes no part in: it only switches on and off. Slower than it was. At 0.15s this read as the strip appearing rather than fading in — the eye does not register a seventh of a second as a transition, it registers it as a cut. */ transition: opacity 0.4s ease-out; } /* The ground the horse stands on, fading up into nothing so the strip has no hard edge across the page. Nearly solid at the foot and held there for the first third: the posts and the barn are drawn in light greys and a brick only a few shades off the page, and over a dense band of text they were competing with whatever ran underneath them. The fade still does its job in the top half, which is where an edge would have shown. It is a layer of its own rather than the element's own background because it has to be able to fade separately from the horse — see the staged fade below. It is held near-solid up past the treeline rather than fading from the lane up, because the trees are the faintest thing in the picture and a paragraph of body text showing through them turns a treeline into noise. The fade now happens above the trees, which is where an edge would have shown anyway. */ .rh-meter::before { content: ""; position: absolute; inset: 0; /* Sky, horizon, field — and all of it in this one layer, because the whole of it is a background on an element that already exists. No extra nodes, no extra paths, nothing for the compositor to do that it was not doing: gradients are rasterised once and then they are a picture. The clouds are three soft ellipses rather than shapes. The point of it is the hay. On flat cream the straw had nothing to be seen against and the rack read as a smudge; against a sky it has an outline. The same goes for the pale coats and the greys. The colours are the ones already in the theme, pulled toward a dusty blue that the water trough was tinted with before it became a feeder. A saturated sky under a footer would be a second logo. */ --rh-field: color-mix(in srgb, var(--wp--preset--color--cream) 92%, var(--wp--preset--color--charcoal)); --rh-sky: color-mix(in srgb, var(--rh-sky-ink, #5E8BA0) 54%, var(--wp--preset--color--cream)); --rh-sky-low: color-mix(in srgb, var(--rh-sky-ink, #5E8BA0) 20%, var(--wp--preset--color--cream)); --rh-haze: color-mix(in srgb, var(--wp--preset--color--tan) 26%, var(--wp--preset--color--cream)); background: /* Three clouds, long and low, none of them the same size and none of them over the join — a cloud sitting on the horizon reads as a smear. */ /* Each cloud is two ellipses: a flat-bottomed one sitting on a wider, fainter one. A single ellipse reads as a thumbprint; flattening the underside is most of what makes it a cloud. */ radial-gradient(38px 6px at 19% 32%, rgba(255, 255, 255, calc(0.95 * var(--rh-cloud, 1))), transparent 70%), radial-gradient(60px 10px at 21% 29%, rgba(255, 255, 255, calc(0.5 * var(--rh-cloud, 1))), transparent 72%), radial-gradient(54px 7px at 58% 24%, rgba(255, 255, 255, calc(0.88 * var(--rh-cloud, 1))), transparent 70%), radial-gradient(86px 12px at 61% 21%, rgba(255, 255, 255, calc(0.42 * var(--rh-cloud, 1))), transparent 74%), radial-gradient(30px 5px at 86% 36%, rgba(255, 255, 255, calc(0.8 * var(--rh-cloud, 1))), transparent 70%), radial-gradient(48px 8px at 88% 33%, rgba(255, 255, 255, calc(0.38 * var(--rh-cloud, 1))), transparent 72%), /* Sky down to a hazy horizon, then ground. The top is still soft: in the approach the strip lies over the page, and a hard edge across somebody's last paragraph is worse than no sky at all. */ linear-gradient( to bottom, transparent 0%, color-mix(in srgb, var(--rh-sky) 76%, transparent) 16%, var(--rh-sky) 30%, var(--rh-sky-low) 60%, var(--rh-haze) 69%, var(--rh-field) 72%, var(--rh-field) 100% ); } /* Shown only on a page long enough to need one (set from the script). */ .rh-meter.is-on { display: block; } /* How much of him there is at all, through the footer. Short of home this is nothing but position: --rh-reach is set from how far past the top of the footer the page has come, a hint of the strip as that edge appears and all of it by the time he is home. It is a ceiling rather than a state — the parts inside still fade away on their own clock when the page stops moving, and this is simply the most they can be. At home the script pins it to 1 and the old rules take over whole: he stays while he is in his own space, and leaves on the terms he always did. That snap is the only discontinuity in the whole arrangement, and it happens at the one position where the strip is covering nothing. There is deliberately no transition on it. It tracks the scrollbar, so a transition would mean it lagging behind the thing it is a measure of. */ .rh-meter.is-on.is-awake, .rh-meter.is-on.is-fading { opacity: var(--rh-reach, 1); } /* Coming down the footer it tracks the scrollbar exactly, so the transition comes off: a quarter-second ease on a value that is already a measurement of where you are means the strip is always showing where you were. Put the other way round — the transition exists for the fades, which are about time, and this one is about position. */ .rh-meter.is-on.is-awake:not(.is-home) { transition: none; } /* Home is whole. The ramp stops applying the moment he is in his own space, and the strip is simply there until the rules that have always taken it away take it away. */ .rh-meter.is-on.is-home { opacity: 1; } /* And then it simply fades out, over three quarters of a second. This was a five-step staircase for a while — 100, 70, 30, 10, nothing — on the theory that holding it readable for the first half of the fade was worth something. It was not: five discrete jumps in the corner of the eye read as a fault, not as a fade. `forwards` keeps it at nothing once it has arrived there; the script takes the class off again on the next scroll, and the transition above brings it back up. */ .rh-meter__horse, .rh-meter__scene, .rh-meter__fore, .rh-meter__ground, .rh-meter__gate, .rh-meter__post, .rh-meter__feeder, .rh-meter::before { /* So that lifting the fade on a re-wake tweens back up rather than snapping: removing a `forwards` animation drops the property straight to its base value, and a transition on the same property animates that drop. Matched to the container's own fade, so the strip and the things inside it arrive together rather than one just after the other. */ transition: opacity 0.4s ease-out; } /* The scenery goes first: the wash, the treeline, the near field, the gate, the quarter marks and the barn. */ .rh-meter.is-on.is-fading::before, .rh-meter.is-on.is-fading .rh-meter__scene, .rh-meter.is-on.is-fading .rh-meter__fore, .rh-meter.is-on.is-fading .rh-meter__gate, .rh-meter.is-on.is-fading .rh-meter__post, .rh-meter.is-on.is-fading .rh-meter__feeder { animation: rh-meter-fade 0.75s ease-out forwards; } /* The horse and the lane he is on hold at full strength for a second and three quarters after the scenery has started going — one more beat than the scenery's own fade takes — and only then go themselves. Long, deliberately. This is the half of the component that is actually information, and the moment worth holding is the one where a reader looks back at the foot of the page to see how far down they are. The lane goes with him because the lane IS the progress: it is the track behind him filled in brick up to where he has got to, and fading it out from under him while he is still standing there leaves a horse hovering over nothing and throws away the one piece of information the component exists to give. The gate, the posts, the trees and the barn are the scenery around that, and they can go. What is left for the last second, then, is exactly a progress bar with a horse at the end of it — which is what someone glancing back a beat too late needs to see. */ .rh-meter.is-on.is-fading .rh-meter__horse, .rh-meter.is-on.is-fading .rh-meter__ground { /* `both`, not `forwards`. With a delay and no backwards fill, an element whose resting opacity is 0 — which is what the button's is — drops to nothing the moment the class lands, waits out the delay, and then pops back to full when the animation finally starts, because the first keyframe is opacity 1. The horse and the lane never showed it because they rest at 1 anyway. Filling backwards holds the start value through the delay, which is what a delay is supposed to mean. And a second longer before any of it begins — less a quarter of a second, which is the difference between him being given a moment and being given a pause. */ animation: rh-meter-fade 0.45s ease-out 1.65s both; } @keyframes rh-meter-fade { from { opacity: 1; } to { opacity: 0; } } /* Sizing, which is the whole argument of this component. Two jobs: show where you are in the page, and be worth scrolling for. The second one fails if the horse is too small to be read as a horse — a 27px smudge that moves is a progress bar with a bug — and the first one fails if he is big enough to compete with the page, because then the site looks like it is doing a bit. So: big enough that nobody squints to see what it is, small enough that it stays furniture. Roughly a third of the strip's height in clear air above everything, which is what keeps it a field with a lane across it rather than a crate with things wedged in it. */ .rh-meter__track { position: relative; height: 100%; padding: 0 var(--rh-meter-inset); } /* ---- The country behind the lane ------------------------------------- A treeline, set back and well above the lane, and nothing else. It is doing one job — saying "outside, in the country" — and the moment it does anything more than that it is competing with the horse, who is the only thing here anyone is meant to be watching. So: one tone, no detail, and faint enough that you read it as distance without ever looking at it directly. Forest at a fifth strength is about where a thing stops being an object and becomes a background. The trunks are fainter still, because at this size a trunk is one pixel and a one-pixel line at full strength reads as a scratch. */ .rh-meter__scene { position: absolute; inset: 0; } .rh-meter__scene-svg { width: 100%; height: 100%; display: block; } /* --rh-leaf is the month's foliage colour, set from MONTHS in the script. Everything green in the picture comes through it, which is what makes a February treeline and an August one the same drawing. */ .rh-meter__tree { fill: color-mix(in srgb, var(--rh-leaf, var(--wp--preset--color--forest)) 22%, transparent); } /* April: the broadleaves come out pale and pink before they come out green. */ .rh-meter__tree--blossom { fill: color-mix(in srgb, #d7b8bd 34%, transparent); } .rh-meter__tree-trunk { fill: none; stroke: color-mix(in srgb, var(--rh-leaf, var(--wp--preset--color--forest)) 20%, transparent); stroke-width: 1.1; stroke-linecap: round; } /* Bare branches need to be a touch stronger than a trunk under a crown — there is no mass of foliage above them doing the reading. */ .rh-meter[data-crown="bare"] .rh-meter__tree-trunk { stroke: color-mix(in srgb, var(--rh-leaf, var(--wp--preset--color--forest)) 30%, transparent); stroke-width: 0.95; } /* The lane. Thicker than the hairline it used to be, so it reads as a track worn into the ground rather than as a ruled line — but grown downwards from the same top edge, because that edge is where the horse's hooves land and moving it would sink him into it. The script sets its left and width to run gate to barn; these are the values it starts from. */ .rh-meter__ground { position: absolute; right: var(--rh-meter-inset); bottom: 5.5px; left: var(--rh-meter-inset); height: 3.5px; border-radius: 2px; background-color: color-mix(in srgb, var(--wp--preset--color--tan) 72%, var(--wp--preset--color--charcoal)); background-image: repeating-linear-gradient( 74deg, color-mix(in srgb, var(--wp--preset--color--charcoal) 26%, transparent) 0 1px, transparent 1px 4px ), repeating-linear-gradient( -68deg, color-mix(in srgb, var(--wp--preset--color--brick) 20%, transparent) 0 1px, transparent 1px 7px ); } /* A lighter band of the same earth, laid just above the lane. Two tones instead of one is the cheapest depth there is: the pale strip reads as ground catching the light further off and the dark one as the track itself, so the lane stops being a line and becomes a surface going away from you. It also puts something behind the hooves — on a single dark band the feet of a dark horse disappeared into it at the moment they landed, which is the moment worth seeing. */ .rh-meter__ground::before { content: ""; position: absolute; inset: auto 0 100% 0; height: 2.5px; background-color: color-mix( in srgb, var(--wp--preset--color--tan) 62%, var(--wp--preset--color--cream) ); border-radius: 2px 2px 0 0; } /* The lane is one surface the whole way along, not a bar that fills. It stopped being a measurement when the brick fill went; keeping the trail growing behind the horse was the same idea wearing a different coat, and it put a moving edge in the one part of the strip that should be still. It also took a write per frame to maintain. Now it is drawn once. */ /* The open gate: the 0% mark, and where the horse comes from. */ .rh-meter__gate { position: absolute; bottom: 6px; left: var(--rh-meter-inset); width: 52px; height: 25px; } .rh-meter__gate-svg { width: 100%; height: 100%; overflow: visible; } .rh-meter__gate-post, .rh-meter__gate-bar { fill: none; stroke: color-mix(in srgb, var(--wp--preset--color--muted) 80%, transparent); stroke-width: 1.5; stroke-linecap: round; } /* The swung-back leaf sits further away than the post it hangs on. */ .rh-meter__gate-bar { stroke: color-mix(in srgb, var(--wp--preset--color--muted) 55%, transparent); stroke-width: 1.3; } /* Quarter, half, three quarters. The script sets `left`; this centres the post on that mark. */ /* A quarter the shorter than they were. At full height the posts stood as tall as the horse, which made the run read as a row of markers that a horse happens to be walking through; shorter, they are fence posts and he is the subject. */ .rh-meter__post { position: absolute; bottom: 6px; width: 12px; height: 17px; transform: translateX(-50%); } .rh-meter__post-svg { width: 100%; height: 100%; overflow: visible; } /* A lit face and a shaded one, in two browns rather than one near-black. A quarter mark is something you read off deliberately, so it has to be dark enough to find — but a flat dark line is a tally mark, and three of them down a lane read as a scale. Split lengthways it is a post. */ .rh-meter__post-lit, .rh-meter__post-dark { fill: none; stroke-linecap: round; } .rh-meter__post-lit { stroke: #9c7a58; stroke-width: 1.2; } .rh-meter__post-dark { stroke: #63482f; stroke-width: 0.95; } .rh-meter__post-shadow { fill: color-mix(in srgb, var(--wp--preset--color--charcoal) 13%, transparent); } /* ---- The near side of the field --------------------------------------- The one layer in front of the horse, and the only reason it is here is depth: a few stems crossing his legs put him IN a field instead of on a line in front of one. Everything else in the strip is behind him. Stronger than the treeline and warmer, because it is nearer — the thing that makes a foreground read as a foreground is contrast, not size. Still well short of the horse's own weight, so it never becomes the subject. --rh-near-ink is the month's, set from MONTHS. */ .rh-meter__fore { position: absolute; inset: 0; } .rh-meter__fore-svg { width: 100%; height: 100%; display: block; } /* Knocked as the horse walks through it: a quick sway off the root and then a settle, the way grass moves when something passes through it rather than when the wind is in it. transform-box: fill-box puts the origin at the bottom of the clump's own bounding box, so each one sways from where it is rooted instead of from the corner of the strip. The script adds and removes the class from the frame loop it is already running — see knock() — so there are no listeners here and nothing is scheduled to tidy up afterwards. */ .rh-meter__clump { transform-box: fill-box; transform-origin: 50% 100%; } .rh-meter__clump.is-knocked { animation: rh-clump-knock 0.52s cubic-bezier(0.25, 0.9, 0.35, 1); } @keyframes rh-clump-knock { 0% { transform: rotate(0deg); } 18% { transform: rotate(-9deg); } 46% { transform: rotate(5.5deg); } 72% { transform: rotate(-2.5deg); } 100% { transform: rotate(0deg); } } .rh-meter__stem { fill: none; stroke: color-mix(in srgb, var(--rh-near-ink, var(--wp--preset--color--forest)) 58%, transparent); stroke-width: 1.15; stroke-linecap: round; } /* Small flower heads in spring, seed heads gone over in autumn. */ .rh-meter__head-dot { fill: color-mix(in srgb, #e0c05c 72%, transparent); } .rh-meter__head-dry { fill: color-mix(in srgb, var(--rh-near-ink, var(--wp--preset--color--tan)) 62%, transparent); } /* And the sunflower, in August and September. */ .rh-meter__head-petal { fill: color-mix(in srgb, #d8a93c 82%, transparent); } .rh-meter__head-eye { fill: color-mix(in srgb, #6b4a28 78%, transparent); } /* The feeding post at the end of the lane: low, so it cannot crop the horse or reach the speech bubble, and close enough to the ground that he stands at it rather than behind it. */ .rh-meter__feeder { position: absolute; right: var(--rh-meter-inset); bottom: 5px; width: 34px; height: 25px; } .rh-meter__feeder-svg { width: 100%; height: 100%; overflow: visible; } .rh-meter__feeder-rack { fill: color-mix(in srgb, var(--wp--preset--color--brick) 74%, var(--wp--preset--color--charcoal)); } .rh-meter__feeder-post { fill: none; stroke: color-mix(in srgb, var(--wp--preset--color--charcoal) 74%, transparent); stroke-width: 2.2; stroke-linecap: round; } .rh-meter__feeder-slat { fill: none; stroke: color-mix(in srgb, var(--wp--preset--color--charcoal) 34%, transparent); stroke-width: 0.9; stroke-linecap: round; } /* The hay. Three passes, because one flat shape at this size reads as a yellow blob: the body with its ragged top, a darker wedge inside it for the depth of the rack, and a few loose wisps breaking the outline. The colour is from a photograph rather than from the idea of hay — good grass hay is a grey-green gold, and the straw yellow this was first drawn in belongs to straw, which is bedding rather than feed. */ .rh-meter__feeder-hay { fill: color-mix(in srgb, #C6B873 88%, var(--wp--preset--color--cream)); stroke: none; } .rh-meter__feeder-hay-deep { fill: color-mix(in srgb, #A2935A 76%, var(--wp--preset--color--charcoal)); opacity: 0.55; } .rh-meter__feeder-wisp { fill: none; stroke: color-mix(in srgb, #C6B873 72%, var(--wp--preset--color--cream)); stroke-width: 0.9; stroke-linecap: round; } /* The plain fallback. When the frame watchdog has decided twice over that this device cannot animate a horse without costing the page its frame rate, the animation is dropped and this is what is left: he is placed where the scroll says and slides there. No gait, no tail, no loop — one transform the compositor can carry on its own. It is still a horse moving across a field. It is not a progress bar with a horse on it, which is what snapping him straight to the scrollbar looked like. */ .rh-meter.is-simple .rh-meter__horse { transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); } /* The horse. Two nested elements on purpose: the outer one carries the walk along the path and which way the horse is facing, the inner one carries the turn. Keeping them apart means the turn can squash the horse without fighting the translation underneath it. --rh-face is a scaleX multiplier the script sets. The fallback is 1 because the horse is drawn facing right and starts off walking right — see DRAWN_FACING in scroll-meter.js. */ .rh-meter__horse { /* The script sets this element's transform directly — see the note where it does. Nothing here should set it as well. */ position: absolute; bottom: 6px; left: var(--rh-meter-inset); width: 38px; height: 27px; /* Set by the script, directly on this element. */ } .rh-meter__horse-turn { position: absolute; inset: 0; display: block; width: 100%; height: 100%; transform: scaleX(var(--rh-face, 1)); transform-origin: 50% 100%; } /* Half a second, pivoting through side-on: the horse narrows to nothing at the midpoint, which is where the script flips which way it faces, then opens out again the other way round. */ .rh-meter.is-turning .rh-meter__horse-turn { animation: rh-meter-turn 0.5s ease-in-out; } @keyframes rh-meter-turn { 0% { transform: scaleX(var(--rh-face, 1)); } 48% { transform: scaleX(calc(var(--rh-face, 1) * 0.18)); } 52% { transform: scaleX(calc(var(--rh-face, 1) * 0.18)); } 100% { transform: scaleX(var(--rh-face, 1)); } } /* ---- The coat --------------------------------------------------------- Every colour on the horse comes through one of these four variables, and the script sets all four from COATS on each page load, so the herd shows a different one each time. The fallbacks are the bay this started as, so the drawing is still a horse if the script never runs. */ .rh-meter__body { fill: var(--rh-coat, var(--wp--preset--color--brick)); /* Nothing on a dark coat — see --rh-edge in scroll-meter.js — and a hairline on the pale ones, which would otherwise be a horse-shaped hole in a cream strip. */ stroke: var(--rh-edge, transparent); stroke-width: 0.5; } /* Markings. Only the one the coat calls for is drawn. */ .rh-meter__patches, .rh-meter__spots { display: none; } .rh-meter[data-coat="paint"] .rh-meter__patches { display: block; fill: #f2ebdd; /* The white of a paint is within a shade or two of the page it is standing on, so the markings need their own edge or the horse looks bitten out rather than marked. */ stroke: var(--rh-edge, transparent); stroke-width: 0.45; } .rh-meter[data-coat="spots"] .rh-meter__spots { display: block; fill: color-mix(in srgb, var(--rh-mane, var(--wp--preset--color--charcoal)) 70%, transparent); } /* The neck is a stroke rather than a filled shape so it keeps its thickness through the head bob instead of pinching at the shoulder. */ .rh-meter__neck { fill: none; stroke: var(--rh-coat, var(--wp--preset--color--brick)); stroke-width: 7.4; stroke-linecap: round; } .rh-meter__mane, /* The tail is set through the CSS d property rather than the attribute, because that is the one that animates — and it only animates between two paths built the same way, which is why the hanging tail and the flying tail are both a single cubic. The tween is off by default and switched on for a quarter of a second around a change of gait. Between gallop frames it has to be off: those change every couple of rendered frames, and transitioning across them smears the travelling wave into a blur. */ .rh-meter__tail { transition: d 0s; fill: none; stroke: var(--rh-mane, var(--wp--preset--color--charcoal)); stroke-linecap: round; } .rh-meter__mane { stroke-width: 1.5; } /* Thicker than the mane: a pony's tail, and the one part of the silhouette that has to read at the far end of the body. */ .rh-meter__tail { stroke-width: 2.3; } .rh-meter.is-tail-tweening .rh-meter__tail { transition: d 0.26s cubic-bezier(0.3, 0, 0.2, 1); } .rh-meter__eye { fill: var(--rh-eye, var(--wp--preset--color--cream)); } .rh-meter__nostril { fill: color-mix(in srgb, var(--rh-mane, var(--wp--preset--color--charcoal)) 55%, transparent); } /* The halter. The thinnest line in the picture, because it is the one thing here that should look light. */ .rh-meter__halter { fill: none; stroke: color-mix(in srgb, var(--rh-mane, var(--wp--preset--color--charcoal)) 55%, transparent); stroke-width: 0.9; stroke-linecap: round; } .rh-meter__leg { fill: none; stroke: var(--rh-leg, var(--wp--preset--color--brick)); stroke-width: 1.8; stroke-linecap: round; /* The gallop frames draw each leg as two segments with a knee or a hock between them, and a mitred join on an 1.8px stroke at a sharp angle throws a spike off the corner. Rounded, the joint reads as a joint. */ stroke-linejoin: round; } /* The off-side pair, a shade back, so the gait reads as a horse rather than as four sticks moving together. */ .rh-meter__leg--off { stroke: color-mix(in srgb, var(--rh-leg, var(--wp--preset--color--brick)) 62%, var(--wp--preset--color--charcoal)); } /* ---- The bob ----------------------------------------------------------- A walking horse nods its head once per stride, twice per four-beat cycle, and the whole body lifts slightly between. Without it the legs scissor under an animal that is gliding, which is the thing that reads as cheap. The head turns about (20, 13) in the viewBox — where the neck meets the barrel — so the nose swings through an arc rather than the head sliding down the neck. Numbers are user units, which at 30px wide is a little under a pixel; that is as much as this wants. The mirroring on the parent carries the rotation with it, so the nod goes down-and-forward whichever way the horse is facing. Frames 0 and 2 are the down beats, 1 and 3 the up ones. */ .rh-meter__head { transform-origin: 20px 13px; transition: transform 185ms ease-in-out; } .rh-meter__horse-svg[data-frame="0"] .rh-meter__head, .rh-meter__horse-svg[data-frame="2"] .rh-meter__head { transform: translateY(0.75px) rotate(2.4deg); } .rh-meter__horse-svg[data-frame="1"] .rh-meter__head, .rh-meter__horse-svg[data-frame="3"] .rh-meter__head { transform: translateY(-0.5px) rotate(-1.5deg); } /* Mid-pivot the head is head-on to you and has nothing to nod with. */ .rh-meter__horse-svg[data-frame="t"] .rh-meter__head { transform: none; } /* The hindquarters, against the head. A walking horse is a seesaw: the head goes down as the rump comes up and back again, twice a cycle, and that counter-motion is most of what separates a walk from a drawing being dragged sideways. The head had it; the body did not, so the animal read as a stiff shape with a nodding front end. Both pivot at the shoulder — this about (21.5, 14), the head about (20, 13) — so the two ends rock about one hinge rather than bending in the middle. The barrel is 17 user units long, so a degree and a half at that length lifts the point of the hip by a visible amount without the horse looking like it is bucking. */ .rh-meter__rump { transform-origin: 21.5px 14px; transition: transform 185ms ease-in-out; } .rh-meter__horse-svg[data-frame="0"] .rh-meter__rump, .rh-meter__horse-svg[data-frame="2"] .rh-meter__rump { transform: translateY(-0.55px) rotate(1.7deg); } .rh-meter__horse-svg[data-frame="1"] .rh-meter__rump, .rh-meter__horse-svg[data-frame="3"] .rh-meter__rump { transform: translateY(0.45px) rotate(-1.3deg); } /* Mid-pivot the horse is head-on and has no long axis to rock about. */ .rh-meter__horse-svg[data-frame="t"] .rh-meter__rump { transform: none; } /* A gallop drives off the hindquarters, so they do a good deal more of the work and the extremes are much further apart: gathered right underneath on g0, stretched out behind at full extension on g2. Roughly twice the walk's swing, which is about the ratio a real one has. */ /* The rump, the height and the tail all come from the pose the script is showing — see GALLOP_POSE in scroll-meter.js, which sets these three custom properties in the same breath as it changes the legs. They used to be four rules apiece. At sixteen poses that would have been forty-eight rules whose only job was to restate a table that already exists in the script, and the two would have drifted the first time anybody touched one of them. */ .rh-meter__horse-svg[data-gait="gallop"] .rh-meter__rump { transform: rotate(var(--rh-rump, 0deg)); } /* The tail, swinging from where it is set on. Four beats rather than two: the legs and the rump work on a two-beat seesaw, and a tail that flipped between the same two positions read as a windscreen wiper. Running it through four unequal angles instead gives it a rhythm of its own, which is what a tail actually has — it is hanging off the horse rather than being driven by it. Inside .rh-meter__rump, so this swing composes with the body's rock. */ .rh-meter__tail-swing { transform-origin: 6.6px 11.4px; transition: transform 140ms ease-in-out; } .rh-meter__horse-svg[data-frame="0"] .rh-meter__tail-swing { transform: rotate(5deg); } .rh-meter__horse-svg[data-frame="1"] .rh-meter__tail-swing { transform: rotate(1.5deg); } .rh-meter__horse-svg[data-frame="2"] .rh-meter__tail-swing { transform: rotate(-4.5deg); } .rh-meter__horse-svg[data-frame="3"] .rh-meter__tail-swing { transform: rotate(-1deg); } /* At a gallop it lifts and streams out behind. */ .rh-meter__horse-svg[data-gait="gallop"] .rh-meter__tail-swing { transform: rotate(var(--rh-tail, -9deg)); } /* Only the current frame is drawn. These key off the svg rather than off the strip: a pose changes up to sixty times a second, and hanging it on the root meant every one of those invalidated the trees, the fence, the foreground and the barn as well as the horse. */ .rh-meter__legs { display: none; } .rh-meter__horse-svg[data-frame="0"] .rh-meter__legs[data-f="0"], .rh-meter__horse-svg[data-frame="1"] .rh-meter__legs[data-f="1"], .rh-meter__horse-svg[data-frame="2"] .rh-meter__legs[data-f="2"], .rh-meter__horse-svg[data-frame="3"] .rh-meter__legs[data-f="3"], .rh-meter__horse-svg[data-frame="g0"] .rh-meter__legs[data-f="g0"], .rh-meter__horse-svg[data-frame="g1"] .rh-meter__legs[data-f="g1"], .rh-meter__horse-svg[data-frame="g2"] .rh-meter__legs[data-f="g2"], .rh-meter__horse-svg[data-frame="g3"] .rh-meter__legs[data-f="g3"], .rh-meter__horse-svg[data-frame="g4"] .rh-meter__legs[data-f="g4"], .rh-meter__horse-svg[data-frame="g5"] .rh-meter__legs[data-f="g5"], .rh-meter__horse-svg[data-frame="g6"] .rh-meter__legs[data-f="g6"], .rh-meter__horse-svg[data-frame="g7"] .rh-meter__legs[data-f="g7"], .rh-meter__horse-svg[data-frame="g8"] .rh-meter__legs[data-f="g8"], .rh-meter__horse-svg[data-frame="g9"] .rh-meter__legs[data-f="g9"], .rh-meter__horse-svg[data-frame="g10"] .rh-meter__legs[data-f="g10"], .rh-meter__horse-svg[data-frame="g11"] .rh-meter__legs[data-f="g11"], .rh-meter__horse-svg[data-frame="g12"] .rh-meter__legs[data-f="g12"], .rh-meter__horse-svg[data-frame="g13"] .rh-meter__legs[data-f="g13"], .rh-meter__horse-svg[data-frame="g14"] .rh-meter__legs[data-f="g14"], .rh-meter__horse-svg[data-frame="g15"] .rh-meter__legs[data-f="g15"], .rh-meter__horse-svg[data-frame="rest"] .rh-meter__legs[data-f="rest"], .rh-meter__horse-svg[data-frame="eat"] .rh-meter__legs[data-f="rest"], .rh-meter__horse-svg[data-frame="look"] .rh-meter__legs[data-f="rest"], .rh-meter__horse-svg[data-frame="unlook"] .rh-meter__legs[data-f="rest"], .rh-meter__horse-svg[data-frame="t"] .rh-meter__legs[data-f="t"] { display: block; } /* ---- Standing --------------------------------------------------------- The strip stays up for a second and a half after you stop scrolling, and for that second and a half the horse is simply standing there. A held walk frame makes that read as a stalled animation; a horse that settles, breathes and swishes his tail reads as a horse waiting for you. Three loops, none of them in step with each other, so it never resolves into a pattern in the short time it is on screen. The breath is slow, the head drops a little the way a resting horse's does, and the tail does nothing at all for most of the cycle and then flicks — which is exactly how often a tail actually moves. */ .rh-meter__horse-svg[data-frame="rest"] .rh-meter__rump { animation: rh-horse-breathe 2.4s ease-in-out infinite; } @keyframes rh-horse-breathe { 0%, 100% { transform: translateY(0) rotate(0deg); } 45% { transform: translateY(-0.32px) rotate(0.55deg); } } .rh-meter__horse-svg[data-frame="rest"] .rh-meter__head { animation: rh-horse-doze 2.4s ease-in-out infinite; } @keyframes rh-horse-doze { 0%, 100% { transform: translateY(0.55px) rotate(1.7deg); } 45% { transform: translateY(1.15px) rotate(3.3deg); } } /* ---- Eating ----------------------------------------------------------- He has walked to his feed, so he eats. This is the only thing in the strip that happens when nothing is being scrolled, which is exactly why it has to be slow: anything brisk down there turns into a flicker in the corner of the eye while somebody is trying to read the footer. So, nine seconds a cycle, and most of it is just a head in the hay. The motion is built the way a horse actually eats rather than as a bobbing head. He drops his nose into the rack, works at it in small movements that stay down — the big travel is the drop, not the chewing — and then lifts for a moment to chew with his head up, the way they do, before going back down. The lift is the only moment anything moves far, and it happens once in nine seconds. The hindquarters stay out of it. Pulling at a rack does shift a horse's weight, but drawn at this size on a 38-pixel animal the whole body rocking reads as a hobby horse, so only the breath remains. */ /* He does not arrive with his nose already buried. The loop below starts at 0% with the head down in the rack, so switching the frame to "eat" put it there in one rendered frame — the one moment in the whole animation that was a cut rather than a movement. A CSS animation also outranks the 185ms transition on .rh-meter__head, so the transition that smooths every other change of pose could not catch this one. So the loop gets a lead-in of its own: one pass that starts from the pose he is actually standing in and lowers him into the hay, and only then does the loop take over. It is the same descent the loop already makes between mouthfuls, given its own beat at the start. It earns its keep twice: coming back from the hover below he is head-up again, and this is what lowers him. It no longer has to hold his head up on the way back from a look. That was its job for a while and it was the wrong one: the flat start needed to cover the turn kept growing as the turn slowed, and it was paid for on arrival too, where there is nothing to cover. The "unlook" frame holds him now — see holdFor() in scroll-meter.js. Leaving the button starts two things at once — the face turning back to profile and the head going down — and run together they were a single abrupt drop with a flinch in it. The head now holds while the face comes round, and only then lowers, so it reads as two movements in order rather than one lurch. On arrival that same flat start costs nothing: he is standing still at that point anyway. */ @keyframes rh-horse-reach { /* Level, which is between the two poses this is ever entered from: the doze he stands in when he arrives, and the lift he holds while a pointer is on the button. Starting at either one exactly made the other end jump a couple of units in a single rendered frame; splitting the difference costs both of them about a unit, which is under a pixel at the size this is drawn, and neither reads as a cut. */ 0% { transform: translateY(-0.4px) rotate(-0.8deg); } /* Reaching: the neck is down, the nose is not yet in it. */ 48% { transform: translateY(1.5px) rotate(8.4deg); } /* Where the loop begins. */ 100% { transform: translateY(2.6px) rotate(15deg); } } .rh-meter__horse-svg[data-frame="eat"] .rh-meter__head { animation: rh-horse-reach 1.3s cubic-bezier(0.45, 0.02, 0.35, 1) both, rh-horse-eat 7.54s ease-in-out 1.3s infinite; } /* 2.5s with his nose down, then the same lift, chew and return as before. */ @keyframes rh-horse-eat { /* Nose down into the hay. */ 0% { transform: translateY(2.6px) rotate(15deg); } /* Working at it: small, and all of it down in the rack. */ 10.5% { transform: translateY(3.1px) rotate(17.2deg); } 18.1% { transform: translateY(2.7px) rotate(15.4deg); } 25.6% { transform: translateY(3.2px) rotate(17.6deg); } 33.2% { transform: translateY(2.8px) rotate(15.8deg); } /* Head up, with a mouthful. */ 47.5% { transform: translateY(0.2px) rotate(1.4deg); } /* Chewing it, up here, barely moving. */ 55.8% { transform: translateY(0.45px) rotate(2.6deg); } 64.2% { transform: translateY(0.15px) rotate(1.2deg); } 72.5% { transform: translateY(0.45px) rotate(2.6deg); } /* And back down for the next one. */ 88.1%, 100% { transform: translateY(2.6px) rotate(15deg); } } /* He still breathes while he eats, and a little deeper for the work. */ .rh-meter__horse-svg[data-frame="eat"] .rh-meter__rump { animation: rh-horse-breathe 3.2s ease-in-out infinite; } /* ---- Hovering the ask -------------------------------------------------- The button above him is the one thing on this strip that takes a pointer, and putting one on it used to do nothing you could see: the horse went on eating. Someone who reaches for the ask should get something back. So he looks up. The frame is set to "look" by holdFor() in scroll-meter.js, which is already where the pointer is handled, and everything below hangs off that one attribute — no second code path, and it ends by itself the moment the pointer leaves. Three loops, none of them the same length, so the idle never settles into a pattern: a slow sway through the barrel, a blink, and a tail that does nothing for most of its cycle and then flicks. Built the same way the standing horse is, because it is the same animal. He comes up only a few degrees past level. The lift out of the rack is what reads as looking over — eighteen degrees of it — and a bigger angle made him look startled rather than interested, as well as being further to come back down from. */ @keyframes rh-horse-lookup { /* Nose in the hay, which is where he is for most of the eat loop. */ 0% { transform: translateY(2.6px) rotate(15deg); } 100% { transform: translateY(-1.4px) rotate(-3.5deg); } } .rh-meter__horse-svg[data-frame="look"] .rh-meter__head { animation: rh-horse-lookup 0.72s cubic-bezier(0.32, 0, 0.24, 1) both; } /* Coming back from a look, his head stays where the look left it while the face turns back under it. The pose is the end of rh-horse-lookup, stated rather than animated — the animation has done its work and re-declaring it here would start it again from the hay. Nothing else about him changes: he goes on breathing, and he goes on blinking until the eyes themselves have turned away. */ .rh-meter__horse-svg[data-frame="unlook"] .rh-meter__head { animation: none; transform: translateY(-1.4px) rotate(-3.5deg); } .rh-meter__horse-svg[data-frame="unlook"] .rh-meter__rump { animation: rh-horse-breathe 3.2s ease-in-out infinite; } .rh-meter__horse-svg[data-frame="unlook"] .rh-meter__eye { transform-box: fill-box; transform-origin: center; animation: rh-horse-blink 4.3s ease-in-out infinite; } /* The sway: smaller than a breath and slower, so it reads as weight being shifted rather than as breathing harder. */ @keyframes rh-horse-attend { 0%, 100% { transform: translateY(0) rotate(0deg); } 28% { transform: translateY(-0.3px) rotate(0.6deg); } 55% { transform: translateY(0.12px) rotate(-0.45deg); } 78% { transform: translateY(-0.22px) rotate(0.35deg); } } .rh-meter__horse-svg[data-frame="look"] .rh-meter__rump { animation: rh-horse-attend 5.2s ease-in-out infinite; } /* The blink: open for the whole cycle but a twelfth of a second, which is about what a blink is. Scaled rather than hidden, so the lid reads as closing. The origin is the eye's own centre in user units — an SVG transform defaults to the viewBox origin, which would swing the eye off the side of the head instead of shutting it. */ @keyframes rh-horse-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.08); } } /* fill-box rather than a hand-written origin: there are two eyes now, at different x, and one shared origin in user units would have shut them both about a point between them — which is a wink and a squint, not a blink. Each lid closes about its own centre. It starts after the face has come round. A horse blinking at you in profile, before he has looked, is the wrong animal. */ .rh-meter__horse-svg[data-frame="look"] .rh-meter__eye { transform-box: fill-box; transform-origin: center; animation: rh-horse-blink 4.3s ease-in-out 1.5s infinite; } /* ---- Turning his face to you ------------------------------------------- The lift above is the first half of looking over; this is the second. They are deliberately sequential rather than simultaneous: a head that rises and rotates in the same breath reads as a flinch, and the neck whips. So nothing here starts until rh-horse-lookup has finished — a 0.72s delay, which is that animation's whole length — and then the face comes round over the best part of half a second. THE HEAD DOES NOT FLIP. The first version of this scaled each drawing to nothing about the centre line of the face and swapped them at the sliver — a playing card turning over, pivoting in mid-air at a point the animal has no joint at. It read exactly as badly as that sounds. A head turning towards you does not pass through nothing. It FORESHORTENS: the muzzle swings away from you and back towards the neck, and the profile collapses along its own length onto the poll, which is the joint it is actually hinged at. Nothing ever vanishes, and nothing pivots about thin air. It is a rotation about a vertical axis through the poll, flattened onto the page as a horizontal squeeze. rotateY was tried first and is the obvious way to say it — but a 3D transform puts the SVG on its own raster layer, and the horse spent the whole turn visibly blurred, which is a worse problem than the one it solved. scaleX down the cosine gets the same foreshortening and stays sharp. The easing carries the shape the cosine would have had: a head turning away holds its length at first and loses it fastest at the end, so the profile accelerates out and the face decelerates in. Ninety degrees of turn, split between the two drawings so that neither ever reaches edge-on — a flat drawing at ninety degrees is invisible, and a head is not. Where they hand over is arithmetic, not taste: the profile is 9 units long, poll at x 23.5 to muzzle at 32.5 the head-on face is 4.2 wide, centred on 25.4 9 x cos(62) = 4.2, so at 62 degrees the profile is exactly as wide as the face is, in the same place, to a fifth of a unit So the profile turns through 62 degrees and the face comes the remaining 28, and at the hand-over the two drawings coincide. THAT is what lets this be a cross-fade rather than a cut. A dissolve between two drawings that do not line up reads as a double exposure — which is what the first attempt at this looked like, because the profile was still three-quarters of its length when the fade ran. Between two that do line up, over a tenth of a second, it reads as the far side of the head coming into view, which is what it is. It is also what stops the second ear arriving from nowhere. Through the hand-over both ears are on screen at once, in the same place, one going and one coming. 0.72 - 1.32s the profile turns away through 62 degrees 1.26 - 1.38s the hand-over, where the two drawings coincide 1.30 - 1.88s the face brings the last 28 degrees round to square on and coming back, which is its mirror and takes as long: 0 - 0.56s the face turns away through 28 degrees 0.50 - 0.62s the hand-over 0.54 - 1.14s the profile comes back round the remaining 62 The hand-over has to land where the profile's motion ENDS, not in the middle of it. The first attempt faded at 0.99s while the profile still had six tenths of a second left to run, so it was still three-quarters of its length when the face appeared over it — the double exposure. The profile's transform now finishes at 1.10s and the fade sits across 1.04 to 1.14s, which is the same moment. Leaving is NOT the mirror of arriving. The delays belong to the rules being transitioned TO, so the base rules below carry the short ones: the pointer goes and the head is back in profile in a third of a second. Waiting out another 0.72s left him eating with his face pointed at the camera. The head does not start dropping until that is done — see the easing on rh-horse-reach, which is nearly flat for its first quarter. */ .rh-meter__head-side { /* The poll: where the neck meets the head, and the only point on this animal the head actually turns about. */ transform-origin: 23.5px 7.4px; transform: scaleX(1) scaleY(1); opacity: 1; /* Leaving: the profile opens back out, SECOND, after the face has turned away — the same two-part shape as arriving, run backwards and at much the same speed. The first version of this did the whole turn back in a third of a second while the outbound took three-quarters, and a head that comes round slowly and snaps back is a head with whiplash. */ transition: transform 0.6s cubic-bezier(0.25, 0.6, 0.35, 1) 0.54s, opacity 0.12s linear 0.5s; } .rh-meter__head-front { /* Its own centre line — this drawing is symmetrical about it. */ transform-origin: 25.4px 5.5px; /* cos(28 degrees): the width it has when the profile hands over. */ transform: scaleX(0.883) scaleY(0.99); opacity: 0; /* Leaving: the face turns away FIRST, accelerating out. */ transition: transform 0.56s cubic-bezier(0.55, 0, 0.78, 0.5), opacity 0.12s linear 0.5s; } .rh-meter__horse-svg[data-frame="look"] .rh-meter__head-side { /* cos(62 degrees). */ transform: scaleX(0.467) scaleY(1.04); opacity: 0; transition: transform 0.6s cubic-bezier(0.55, 0, 0.78, 0.5) 0.72s, opacity 0.12s linear 1.26s; } .rh-meter__horse-svg[data-frame="look"] .rh-meter__head-front { transform: scaleX(1) scaleY(1.04); opacity: 1; transition: transform 0.58s cubic-bezier(0.25, 0.6, 0.35, 1) 1.3s, opacity 0.12s linear 1.26s; } /* The neck takes a little of the turn with it, pivoting at the shoulder: a shade more upright, and widened as it comes round towards you. Small on purpose — the body stays side-on, and this is a horse looking back at you over its own shoulder rather than a horse facing you. This one DOES run across the whole turn rather than one half of it. The neck is the thing both halves are hanging off, and a neck that stopped moving at the join would have told you where the join was. */ .rh-meter__neck { transform-origin: 19.6px 13.6px; transition: transform 1.14s cubic-bezier(0.33, 0, 0.3, 1); } .rh-meter__horse-svg[data-frame="look"] .rh-meter__neck { transform: rotate(-3.4deg) scaleX(1.09); transition: transform 1.16s cubic-bezier(0.33, 0, 0.3, 1) 0.72s; } /* Head-on, the eyes are DARK. --rh-eye is picked per coat for contrast against that coat, and on the eight dark ones it is cream: in profile that is one pale eye on the side of a dark face, which is how you draw a horse. Head-on it is two pale discs looking straight out of the screen, and it stops reading as a horse and starts reading as something else entirely. So these do not use --rh-eye at all. They are mixed from the coat towards near-black — the palette's charcoal taken halfway to black, so it moves with the palette — which means they are always darker than the face they sit on by the same margin — dark enough to be eyes on a palomino, still present rather than lost on a black. A flat black would have disappeared into the two darkest coats completely. */ .rh-meter__head-front .rh-meter__eye { fill: color-mix(in srgb, var(--rh-coat, var(--wp--preset--color--brick)) 32%, color-mix(in srgb, var(--wp--preset--color--charcoal) 50%, black)); } /* The mouth. Same weight as the halter — the lightest line on the animal, because it is doing the most suggesting. */ .rh-meter__smile { fill: none; /* Off the COAT, not the mane — the same reasoning as the eyes above. Four of the twelve coats have a mane paler than the body (the palomino's is nearly white), and a mouth drawn in it disappeared into the face it was drawn on. Mixed towards near-black it is always a step darker than whatever it sits on, and softer than the eyes, which is the order of importance these have. */ stroke: color-mix(in srgb, var(--rh-coat, var(--wp--preset--color--brick)) 52%, color-mix(in srgb, var(--wp--preset--color--charcoal) 50%, black)); stroke-width: 0.52; stroke-linecap: round; } /* And the nostrils, which had the same problem for the same reason: two cream dots on a palomino's muzzle read as a marking rather than as a nose. Only head-on — the single profile nostril sits at the end of the muzzle against the sky and is fine as it is. */ .rh-meter__head-front .rh-meter__nostril { fill: color-mix(in srgb, var(--rh-coat, var(--wp--preset--color--brick)) 52%, color-mix(in srgb, var(--wp--preset--color--charcoal) 50%, black)); } /* The tail: idle for most of the cycle, then a flick that damps out over three decreasing swings. A tail is thrown and then hangs; it does not oscillate evenly. */ @keyframes rh-horse-flick { 0%, 56%, 100% { transform: rotate(0deg); } 63% { transform: rotate(-7.5deg); } 70% { transform: rotate(5.5deg); } 78% { transform: rotate(-3deg); } 86% { transform: rotate(1.4deg); } } .rh-meter__horse-svg[data-frame="look"] .rh-meter__tail-swing { animation: rh-horse-flick 5.6s ease-in-out 1.4s infinite; } /* Tail: the same thrown shapes as standing, left to the script. */ .rh-meter__horse-svg[data-frame="eat"] .rh-meter__tail-swing { transform: none; } /* The standing tail is thrown rather than rotated — see SWISH in scroll-meter.js. Rotating the group swings the dock and the tip through the same angle at the same moment, which is a wag; drawing it lets the shape travel down the hair, which is a whip. The group's own transform is held at nothing here so the two cannot fight. */ .rh-meter__horse-svg[data-frame="rest"] .rh-meter__tail-swing { transform: none; } /* Breathing, dozing and swishing all stop when the strip is not on screen. A CSS animation on a faded-out element still runs, still ticks the compositor and still shows up in a profile; paused, it costs nothing. Scoped to the inside of the horse, and not to everything: written as `*` it also paused the fade that was in the middle of taking the strip away, so the strip stopped half way and stayed on the page for the rest of the session. The fades live on the outer elements — the horse's own wrapper, the lane, the scenery — and must keep running. */ .rh-meter:not(.is-awake):not(.is-home) .rh-meter__horse-svg, .rh-meter:not(.is-awake):not(.is-home) .rh-meter__horse-svg *, .rh-meter.is-still .rh-meter__horse-svg, .rh-meter.is-still .rh-meter__horse-svg * { animation-play-state: paused !important; } /* ---- The gallop ------------------------------------------------------ A galloping horse does not hold its head where a walking one does: the neck stretches out and down and stops nodding, because the nod belongs to the walk. And the whole animal lifts off the ground on the extended beat, which is the one thing that makes a gallop unmistakably a gallop. */ .rh-meter__horse-svg[data-gait="gallop"] .rh-meter__head { transform: translateY(1.4px) rotate(4.5deg); } /* The height through the stride, and it goes with the legs: highest on g0, which is the gathered beat with everything folded under him and nothing on the ground, and lowest on g2, which is full extension with all the weight on it. This was the wrong way round when the extended pose was being treated as the airborne one. */ /* The flying tail is drawn back past the left edge of the horse's own viewBox — a tail streaming out behind him is longer than the box the animal is drawn in, and widening the box instead would shrink everything else inside it. So the drawing is allowed out of its frame. Measured: the tip reaches 1.7px past the edge, and with overflow hidden it was being cut square. */ .rh-meter__horse-svg { overflow: visible; } .rh-meter__horse-svg[data-gait="gallop"] { transform: translateY(var(--rh-lift, 0px)); } /* ---- Breaking into it, and coming down out of it --------------------- The two moments the whole component is really for. A flick of the wheel and he drops onto his forehand and goes; stop scrolling and he rocks back onto his hocks and comes down to a walk. Both pivot about the hind feet, so the forehand is what rises and falls — pivoting about the middle would just rock the whole animal like a boat. The script restarts these by reading offsetWidth between removing and adding the class, so a second flick during the first break re-fires it. */ .rh-meter__lean { transform-origin: 9px 23.8px; } .rh-meter.is-bolting .rh-meter__lean { animation: rh-meter-bolt 0.42s cubic-bezier(0.2, 0.9, 0.3, 1); } .rh-meter.is-halting .rh-meter__lean { animation: rh-meter-halt 0.42s cubic-bezier(0.3, 0.8, 0.4, 1); } @keyframes rh-meter-bolt { 0% { transform: none; } 30% { transform: translateX(-1.5px) rotate(-4deg); } 65% { transform: translateX(0.4px) rotate(1.2deg); } 100% { transform: none; } } @keyframes rh-meter-halt { 0% { transform: none; } 30% { transform: translateX(1.3px) rotate(3.4deg); } 65% { transform: translateX(-0.4px) rotate(-1deg); } 100% { transform: none; } } /* Someone who has asked for less motion still gets the meter — the bar fills and the horse moves along the path — but no walk cycle, no bob and no pivot. */ @media (prefers-reduced-motion: reduce) { .rh-meter.is-turning .rh-meter__horse-turn { animation: none; } .rh-meter, .rh-meter.is-bolting .rh-meter__lean, .rh-meter.is-halting .rh-meter__lean { animation: none; } .rh-meter__head, .rh-meter__horse-svg, .rh-meter__rump, .rh-meter__tail-swing { transition: none; } /* Nothing in the field moves for someone who has asked for less of it. */ .rh-meter__clump.is-knocked { animation: none; } /* He still stands square rather than freezing mid-stride — that is a pose, not motion — but he stops breathing and swishing. */ .rh-meter__horse-svg[data-frame="rest"] .rh-meter__rump, .rh-meter__horse-svg[data-frame="rest"] .rh-meter__head, .rh-meter__horse-svg[data-frame="rest"] .rh-meter__tail-swing, /* And the hover idle: the look, the sway, the blink and the flick are all motion, and somebody who asked for less of it has asked for this too. The pointer still gets a button; it does not get a performance. */ .rh-meter__horse-svg[data-frame="look"] .rh-meter__head, .rh-meter__horse-svg[data-frame="look"] .rh-meter__rump, .rh-meter__horse-svg[data-frame="look"] .rh-meter__eye, .rh-meter__horse-svg[data-frame="look"] .rh-meter__tail-swing, .rh-meter__horse-svg[data-frame="unlook"] .rh-meter__head, .rh-meter__horse-svg[data-frame="unlook"] .rh-meter__rump, .rh-meter__horse-svg[data-frame="unlook"] .rh-meter__eye, /* And eating, which was still running three animations under here. The `transform: none !important` below meant none of them reached the screen, so this was invisible rather than harmless: a compositor ticking through a 7.5s loop, a 3.2s loop and a lead-in, every frame, to produce a horse standing still. */ .rh-meter__horse-svg[data-frame="eat"] .rh-meter__head, .rh-meter__horse-svg[data-frame="eat"] .rh-meter__rump, .rh-meter__horse-svg[data-frame="eat"] .rh-meter__tail-swing { animation: none; } /* He keeps his profile. The turn is motion, and the transform: none below would otherwise leave both heads drawn at full width on top of one another — so the head-on face is held shut explicitly rather than left to a rule that only cancels transforms. */ .rh-meter__head-front { opacity: 0 !important; } .rh-meter__head-side { opacity: 1 !important; } .rh-meter__head-side, .rh-meter__head-front, .rh-meter__neck { transition: none; transform: none !important; } .rh-meter__head, .rh-meter__horse-svg, .rh-meter__rump, .rh-meter__tail-swing, .rh-meter__lean { transform: none !important; } } /* ---- Home, and what he says when he gets there ------------------------- The foot of the document has room made for the strip — see the padding below — so that when a reader reaches the end of a page the horse is standing in his own patch of ground rather than over the last line of the footer. He does not fade there. It is where he lives. And he asks for something. The button above him is the header's own Donate button, cloned, so it cannot drift from it in style or in destination; the triangle under it points at the horse, which is what turns a floating button into something being said. It stands over the barn and does not move. A control that travels is a control that is hard to hit — hardest for anyone using a head pointer, a switch, or a hand that is not steady — so it waits in one place and appears when the horse reaches it. Same position every time, and it is only there when he is under it. */ .rh-meter__say { position: absolute; /* Back down where it was: with the barn gone there is nothing tall under it, so it sits just above the horse's ears. */ bottom: 44px; /* Placed by the script, over the barn, once per layout. */ left: 50%; z-index: 2; display: block; opacity: 0; /* Leaving: it sinks a little as it goes, which is what makes it read as going rather than as being switched off. This transition is the one that runs on the way OUT, because this is the state being returned to — the faster one below runs on the way in. */ transform: translateX(-50%) translateY(3px); transition: opacity 0.42s ease, transform 0.42s ease; /* The strip takes no clicks; this one thing does. */ pointer-events: none; } .rh-meter.is-on.is-arrived.is-awake .rh-meter__say, .rh-meter.is-on.is-arrived.is-home .rh-meter__say { opacity: 1; /* No slide on the way in — a button that travels into place reads as taking its time — but it does fade now. At 0.16s it did not arrive so much as switch on: a hard edge in the one part of the page where everything else eases, landing while the horse was still settling at his feed. It waits for him, then comes up. The delay is shorter than the lead-in on rh-horse-reach above, so the two overlap rather than queue — he is lowering his head as it appears, which reads as one gesture rather than two. */ transform: translateX(-50%) translateY(0); transition: opacity 0.5s ease-out 0.22s, transform 0s; pointer-events: auto; } /* Touch it and it stops going anywhere: full strength, no fade, and the horse underneath comes to a stand (see is-held in scroll-meter.js). A button that is fading while a pointer is on its way to it is a button that gets missed. */ .rh-meter .rh-meter__say:hover, .rh-meter .rh-meter__say:focus-within { opacity: 1; animation: none; pointer-events: auto; } /* The tail of the speech bubble. Drawn as a triangle rather than a rotated square so it keeps a clean point at this size, and sat a hair over the button's edge so there is no seam between the two. Its own offset along the pill comes from the script: while the pill can centre over the horse this stays at nothing, and once the pill has hit the end of the strip the point keeps going to stay over him. The script holds it inside the pill's width so it cannot slide off a corner. */ .rh-meter__say::after { content: ""; position: absolute; top: calc(100% - 1px); left: calc(50% + var(--rh-say-point, 0px)); width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 8px solid var(--wp--preset--color--brick); transform: translateX(-50%); transition: border-top-color var(--wp--custom--header--fade, 0.18s) ease; } /* The point lights with the word above it. Hovering the right-hand half of the button lays currentColor over its ground at 16% — see .rh-donate__label:hover in theme.css — and the tail is part of that shape, not a decoration beside it. Left out of the change it stayed the darker brick, which put a seam across the bottom of the button at the exact moment somebody was looking at it. The colour is stated rather than inherited: the tail is drawn with borders on a pseudo-element, so there is no background here for a translucent overlay to sit on, and currentColor on this element is the strip's, not the button's. This is what that overlay resolves to over brick — checked against the rendered label rather than guessed. Only the word's half. The heart's half is shaded rather than lit, on purpose, and the tail sits under the word. */ .rh-meter__say:has(.rh-donate__label:hover)::after, .rh-meter__say:has(.rh-donate__label:focus-visible)::after { border-top-color: color-mix( in srgb, var(--wp--preset--color--cream) 16%, var(--wp--preset--color--brick) ); } /* The clone keeps the header's own look — but only the part of it that comes from the button itself. The label's case and tracking are set by a rule scoped to the header bar, which this is not inside, so the clone arrived in sentence case at the wrong weight. Measured against the original: 600 against 500, 1.23px of tracking against 0.25, uppercase against none. Restated here rather than left to look nearly right. */ .rh-meter__say .rh-donate__label { font-weight: 600; /* 0.1em, which is what the header's label measures at — not the --tracking-label custom property, which is 0.15em and belongs to the small caps labels inside the menu panels. Reusing the wrong variable got close enough to look right and measured half a pixel wide. */ letter-spacing: 0.1em; text-transform: uppercase; } .rh-meter__say .wp-block-button__link { display: inline-flex; margin: 0; box-shadow: var(--wp--preset--shadow--card); white-space: nowrap; } /* The room for all of this used to be padding under the whole document, with the strip fixed to the window on top of it. It is the footer's own paddock now: real space in the page's layout, between the footer's columns and the site's last line, so that line sits below the field rather than behind it. The strip itself is still fixed to the window. position: sticky was the obvious answer and it is the wrong one here: sticky is bounded by its containing block, so a strip living in the footer can only be held up for as long as there is footer above it — about three hundred pixels, where the rule is five hundred. So the paddock keeps the space and the script places the strip in it. What the script writes is one number, bottom, worked out from the page offset it already knows and the scroll position: no measuring, and nothing written at all while the strip is away. Because that number is continuous there is no moment of handover to land late — the strip is pinned to the foot of the window while its place in the footer is still below the fold, and as that place rises the number rises with it until the strip is simply sitting in it, with the site's last line below. */ body.rh-has-meter .rh-footer__paddock { position: relative; /* The strip, plus room above it for what the horse says. */ height: 118px; } .rh-meter.is-paddocked { position: fixed; right: 0; bottom: 0; left: 0; } /* Narrow screens get it too, and now they get the room with it. When the strip was fixed to the window there was deliberately no space reserved on a phone — the strip simply lay over the end of the page. In the footer it has somewhere to be, so the only change needed is a little less of it. */ @media (max-width: 600px) { body.rh-has-meter .rh-footer__paddock { height: 100px; } } @media (prefers-reduced-motion: reduce) { .rh-meter__say { transition: none; } }