/* ============================================================ PLACED BY HAND A rebuild of how the collage assembles. The arrangement, the travel vectors and the final composition are untouched: this changes only how the pieces MOVE on their way there. Everything is scoped to `html.handmade`. Remove that one class from in index.html and the intro goes back to exactly what it was. Nothing here touches the original. WHY The intro used two of the twelve principles of animation: slow in / slow out, and a small overshoot. Every one of the eighteen pieces shared a single easing, a single 1400ms duration and a single starting scale, so a brass bell and a paper stamp arrived in precisely the same way. That is the main reason it read as generic rather than handmade. BUILT IN STEPS Each step below was added on its own and judged before the next one went in, so any of them can be backed out without unpicking the others. 1. Weight <- this file, so far 2. Real springs 3. Arcs 4. Follow-through 5. Placed, not revealed 6. Rhythm ============================================================ */ /* ============================================================ STEP 1: WEIGHT The only thing this step changes is HOW LONG each piece takes. Nothing else: same paths, same easing, same delays, same destinations. One variable, so it is obvious whether it helps. Heavy things fall fast and stop. Light things take their time. That is the whole idea, and it is the deepest missing signal: Material Design states it as a rule, that elements should behave as though they have mass. The classes are assigned from what each piece IS, not from how big it is on screen: 0.80 heavy, rigid brass bell, dosa thali 0.88 medium rickshaw, coconut bike, chai, bangles 1.00 card stock Polaroid, postcard, both stamps 1.12 light paper musicians, couple, sun 1.22 airy three marigolds, lotus 1.35 weightless kolam ⚠️ Durations are multiplied but DELAYS are not, so the order in which pieces START is unchanged while the order in which they LAND is not. That is deliberate. It is what weight means. One consequence worth knowing: the last thing to settle is no longer the bangles at 3125ms but a marigold at about 3243ms, because the heavy pieces now land early and the airy ones drift in after them. The headline still arrives at 3000ms, so it now overlaps the tail of one marigold's settle by about 240ms. That tail is sub-pixel movement, and the overlap reads as one continuous gesture rather than two events. If it ever needs tightening, it belongs in step 6 with the rest of the rhythm work. ⚠️ The Polaroid is deliberately absent below. It runs on --polaroid-dur, not --travel-dur, and it is card stock, so its multiplier would be 1.0 and the rule would do nothing. ============================================================ */ html.handmade { /* The baseline every multiplier is measured against. This is the same 1400ms the original used for all eighteen pieces, kept as its own property because --travel-dur cannot be defined in terms of itself. */ --dur-base: 1400ms; } /* Applies to every piece. A piece with no --mass keeps the original 1400ms, so an unclassified piece degrades to old behaviour rather than breaking. This scores the same as the per-piece rules below, which normally means source order decides. It does not matter here because the two set different properties: this one reads --mass, those set it. */ html.handmade .piece { --travel-dur: calc(var(--dur-base) * var(--mass, 1)); } /* ---------- heavy and rigid ---------- Brass and fired clay. These do not float, they drop and stop. */ html.handmade .p-bell, html.handmade .p-dosa { --mass: 0.8; } /* ---------- medium ---------- Metal, glass, things with a bit of heft but not much. The chai glass has liquid in it, which is its own kind of weight. */ html.handmade .p-rickshaw, html.handmade .p-coconut, html.handmade .p-chai, html.handmade .p-bangles { --mass: 0.88; } /* ---------- card stock ---------- The baseline. Postage stamps and postcards are stiff, printed, substantial paper, and the Polaroid is the same. Left at 1.0 on purpose: this is the reference everything else is judged against, and it is the timing the composition was originally tuned to. */ html.handmade .p-postcard, html.handmade .p-stamp, html.handmade .p-stamp-blr { --mass: 1; } /* ---------- light paper ---------- Thin cut-outs of printed illustration. Barely any mass, but still flat sheets rather than anything that catches the air. */ html.handmade .p-musicians, html.handmade .p-couple, html.handmade .p-sun { --mass: 1.12; } /* ---------- airy ---------- Flowers. Broad, soft, and enough surface area relative to their weight that the air genuinely slows them down. */ html.handmade .p-marigold-a, html.handmade .p-marigold-b, html.handmade .p-marigold-two, html.handmade .p-lotus { --mass: 1.22; } /* ---------- weightless ---------- The kolam is rice flour on the ground. It is not an object at all, it is a mark, so it has no business arriving at the same speed as a brass bell. The slowest thing in the composition. */ html.handmade .p-kolam { --mass: 1.35; } /* ============================================================ STEP 2: REAL SPRINGS Step 1 gave each class its own duration. This gives each class its own CHARACTER: whether it bounces when it lands, and how long it keeps drifting before it truly stops. The original used two hand-tuned cubic-beziers for all eighteen pieces. A bezier can overshoot, but it cannot be given a real tail, and the tail is most of what the eye reads as weight. So the emerging pieces now use springs simulated properly from stiffness and damping, emitted as CSS `linear()`. ⚠️ Generated by tools/springs.py. Do not hand-edit the numbers. Nudging one bends the physics rather than the look, and the curve stops being a spring. THE PROGRESSION heavy 0.0% overshoot, settles in 0.81s medium 0.1% overshoot, settles in 0.79s card 2.2% overshoot, settles in 0.95s light 3.3% overshoot, settles in 1.02s airy 0.8% overshoot, settles in 1.16s weightless 0.0% overshoot, settles in 1.45s ⚠️ The overshoot column is deliberately NOT a straight line from heavy to weightless, and that is not an oversight. Bounce and lightness are different things. A stiff little postage stamp is light AND springy, so it bounces most. A marigold is lighter still but drag-dominated, so it does not bounce at all: it simply takes a long time to stop. Reading down the settle column instead, which does rise all the way, is where the weight is. ⚠️ Overshoot is kept small on purpose. It lands on scale, position and tilt at the same moment, so a figure that looks gentle on any one of them is far too much when all three do it together. 3.3% is the most any piece gets. ⚠️ THE PIECES IN FRONT OF THE POLAROID DO NOT GET SPRINGS. They are a different gesture: they start oversized, as though close to the lens, and shrink back down onto the composition. A spring front-loads its movement, which for a shrinking piece means it does nearly all the shrinking in the first fifth and then sits still. That reads as a snap, not a descent. It is a documented trap in this codebase and it was found the hard way once already. So those six keep a near-symmetric curve, and only the amount they dip below full size as they touch down varies by class: settle-heavy 0.1% dip, midpoint 0.52 settle-medium 1.4% dip, midpoint 0.57 settle-airy 3.1% dip, midpoint 0.66 The midpoint column is the check that they stayed symmetric. A true ease-out sits near 0.85; anything approaching that is the snap coming back. ============================================================ */ html.handmade { /* heavy: stiffness 210, damping 29.0 (critically damped, critical is 29.0) settles in 0.810s, peaks at 1.0000 = +0.0% overshoot */ --spring-heavy: linear( 0 0%, 0.0873 4.167%, 0.2584 8.333%, 0.4319 12.5%, 0.5835 16.67%, 0.7014 20.83%, 0.7912 25%, 0.8554 29.17%, 0.9015 33.33%, 0.9332 37.5%, 0.9553 41.67%, 0.9701 45.83%, 0.9802 50%, 0.9869 54.17%, 0.9914 58.33%, 0.9943 62.5%, 0.9963 66.67%, 0.9976 70.83%, 0.9984 75%, 0.999 79.17%, 0.9993 83.33%, 0.9996 87.5%, 0.9997 91.67%, 0.9998 95.83%, 1 100% ); /* medium: stiffness 190, damping 25.0 (under-damped, critical is 27.6) settles in 0.794s, peaks at 1.0010 = +0.1% overshoot */ --spring-medium: linear( 0 0%, 0.0801 4.167%, 0.243 8.333%, 0.4218 12.5%, 0.579 16.67%, 0.7061 20.83%, 0.8023 25%, 0.8718 29.17%, 0.9205 33.33%, 0.9524 37.5%, 0.9729 41.67%, 0.9856 45.83%, 0.9932 50%, 0.9975 54.17%, 0.9996 58.33%, 1.0006 62.5%, 1.001 66.67%, 1.001 70.83%, 1.0009 75%, 1.0007 79.17%, 1.0005 83.33%, 1.0004 87.5%, 1.0003 91.67%, 1.0002 95.83%, 1 100% ); /* card: stiffness 170, damping 20.0 (under-damped, critical is 26.1) settles in 0.947s, peaks at 1.0223 = +2.2% overshoot */ --spring-card: linear( 0 0%, 0.103 4.167%, 0.311 8.333%, 0.529 12.5%, 0.7123 16.67%, 0.847 20.83%, 0.9345 25%, 0.9865 29.17%, 1.0124 33.33%, 1.0219 37.5%, 1.0223 41.67%, 1.0184 45.83%, 1.0134 50%, 1.0087 54.17%, 1.005 58.33%, 1.0024 62.5%, 1.0008 66.67%, 1 70.83%, 0.9996 75%, 0.9995 79.17%, 0.9995 83.33%, 0.9996 87.5%, 0.9997 91.67%, 0.9998 95.83%, 1 100% ); /* light: stiffness 150, damping 18.0 (under-damped, critical is 24.5) settles in 1.018s, peaks at 1.0327 = +3.3% overshoot */ --spring-light: linear( 0 0%, 0.1058 4.167%, 0.3209 8.333%, 0.5443 12.5%, 0.7338 16.67%, 0.8711 20.83%, 0.9587 25%, 1.007 29.17%, 1.0281 33.33%, 1.0327 37.5%, 1.0288 41.67%, 1.0216 45.83%, 1.0143 50%, 1.0083 54.17%, 1.0039 58.33%, 1.0012 62.5%, 0.9997 66.67%, 0.9991 70.83%, 0.9989 75%, 0.9991 79.17%, 0.9993 83.33%, 0.9995 87.5%, 0.9997 91.67%, 0.9999 95.83%, 1 100% ); /* airy: stiffness 80, damping 15.0 (under-damped, critical is 17.9) settles in 1.164s, peaks at 1.0076 = +0.8% overshoot */ --spring-airy: linear( 0 0%, 0.0747 4.167%, 0.2327 8.333%, 0.4102 12.5%, 0.5735 16.67%, 0.7084 20.83%, 0.8119 25%, 0.8866 29.17%, 0.9376 33.33%, 0.9704 37.5%, 0.9901 41.67%, 1.0009 45.83%, 1.006 50%, 1.0076 54.17%, 1.0074 58.33%, 1.0063 62.5%, 1.005 66.67%, 1.0037 70.83%, 1.0025 75%, 1.0017 79.17%, 1.001 83.33%, 1.0006 87.5%, 1.0003 91.67%, 1.0001 95.83%, 1 100% ); /* weightless: stiffness 45, damping 13.0 (critically damped, critical is 13.4) settles in 1.454s, peaks at 1.0000 = +0.0% overshoot */ --spring-weightless: linear( 0 0%, 0.0642 4.167%, 0.1989 8.333%, 0.3516 12.5%, 0.4935 16.67%, 0.6151 20.83%, 0.7137 25%, 0.7908 29.17%, 0.8498 33.33%, 0.8933 37.5%, 0.9251 41.67%, 0.948 45.83%, 0.9642 50%, 0.9757 54.17%, 0.9836 58.33%, 0.9891 62.5%, 0.9928 66.67%, 0.9953 70.83%, 0.997 75%, 0.998 79.17%, 0.9988 83.33%, 0.9992 87.5%, 0.9995 91.67%, 0.9997 95.83%, 1 100% ); /* The landing curves for the six pieces that settle down onto the composition rather than emerging from behind it. Beziers, not springs, for the reason set out above. */ --settle-heavy: cubic-bezier(0.45, 0.03, 0.55, 1.03); --settle-medium: cubic-bezier(0.45, 0.03, 0.55, 1.15); --settle-airy: cubic-bezier(0.42, 0.02, 0.5, 1.24); } /* ---------- emerging from behind the Polaroid ---------- --piece-ease is read by both the `assemble` and `wobble` animations, so setting it here changes travel and tilt together, which is what keeps a piece feeling like one object. */ html.handmade .p-dosa { --piece-ease: var(--spring-heavy); } html.handmade .p-rickshaw, html.handmade .p-coconut { --piece-ease: var(--spring-medium); } html.handmade .p-postcard, html.handmade .p-stamp, html.handmade .p-stamp-blr { --piece-ease: var(--spring-card); } html.handmade .p-musicians, html.handmade .p-couple, html.handmade .p-sun { --piece-ease: var(--spring-light); } html.handmade .p-lotus { --piece-ease: var(--spring-airy); } html.handmade .p-kolam { --piece-ease: var(--spring-weightless); } /* The Polaroid is the exception: it runs `pol-in` rather than `assemble`, and that keyframe reads --ease-emerge directly rather than --piece-ease. It is card stock, like the stamps it rises in front of. */ html.handmade .p-polaroid { --ease-emerge: var(--spring-card); } /* ---------- settling down onto the composition ---------- These override the grouped rule in styles.css that gives all six the same --ease-settle. */ html.handmade .p-bell { --piece-ease: var(--settle-heavy); } html.handmade .p-chai, html.handmade .p-bangles { --piece-ease: var(--settle-medium); } html.handmade .p-marigold-a, html.handmade .p-marigold-b, html.handmade .p-marigold-two { --piece-ease: var(--settle-airy); } /* ============================================================ STEP 3: ARCS The largest single change, and the one that fixes the deepest source of the generic feeling: every piece used to travel in a dead straight line. Nothing in the physical world does that. A hand placing paper on a wall pivots at the wrist and the shoulder, so the paper always travels a curve. Nielsen Norman put it plainly: an arc path looks more natural than a diagonal one. HOW IT IS DONE, AND WHY THIS WAY The obvious approach is to split the travel in two, horizontal on one element and vertical on another with a different easing, so the two compound into a curve. That was the plan. It does not work here, and the reason is worth writing down: --from-x and --from-y are declared on the piece, and the only spare element is the .layer wrapper ABOVE it. Custom properties inherit downward only, so the wrapper cannot see the values, and neither can it see --fan-delay, so its arc could not be timed to match the piece it belongs to. So the arc is added instead of extracted. The straight-line travel in `assemble` is left completely alone, and a fourth animation lifts the piece off that line and sets it back down: 0% on the line 45% --bow above it 100% on the line again A straight path plus a displacement that peaks in the middle IS a curve, and this version has three advantages over splitting. It reads --bow, --fan-delay and --travel-dur from the piece, so the timing cannot drift. It returns to zero, so the final composition is arithmetically guaranteed to be untouched. And it can be deleted on its own without unpicking steps 1 and 2. The peak sits at 45% rather than 50% so the fall is slightly longer than the rise, which is what gravity does. ⚠️ This uses the individual `translate` property, which is unused everywhere else in the site. It has to be that and not `transform`, because `assemble` already owns `transform` on this element and the two would overwrite each other. `rotate` is taken by `wobble` for the same reason. Three animations, three separate properties, no collisions. ⚠️ The browser applies translate, then rotate, then scale, then transform. The bow is therefore applied OUTSIDE the piece's own tilt, in the stage's own coordinates, which is what makes it a true vertical lift rather than a lift along whatever angle the piece happens to be sitting at. ⚠️ The mouse parallax in main.js writes `transform` on .layer and on the