GIB / MOTION LABLOCAL FILE · ZERO REQUESTS
Demo sats
earned 000000

Interaction studies · volume 01

A like with proof of work.

made by @20876 on twetch

Eight like-button studies for a Bitcoin SV (BSV) social feed. Click for the full effect. Keep holding for 800 ms to escalate that same study into a golden $1 like. Release early and you still get the complete click animation.

  1. 01 Click = full effect
  2. 02 Hold 800 ms
  3. 03 $1 like

Click earns 21 imaginary sats. A held $1 like earns 2,100. Unliking also pays. It is a demo, not monetary policy.

Mechanic 000 / baselineReady
Click / full effectHold / $1 at 800 ms

The specimen tray

Eight ways to make a like land.

LIVE CSS / copy exactly what runs
SVG first · transform led · reduced-motion safe

Block 001Click 760 / hold 1150 ms

Proof of Heart

Click for the heartbeat, rings and sats receipt. Hold to gild the same burst and stamp it $1.

SVG heart8 sparksgold $1 variant
Live specimenClick full / hold $1
Click full · hold for gold
proof-of-heart.cssLive source
Block 002Click 820 / hold 1180 ms

Diamond Hands

Click for cyan facets. Hold to turn the same shards, flash and diamond stamp to bullion gold.

Facets6 shardsgold $1 variant
Live specimenClick full / hold $1
Pressure is the feature
diamond-hands.cssLive source
Block 003Click 1080 / hold 1450 ms

GM Sunrise

Click for GM and six sequential rays. Hold for a higher, brighter golden sunrise with a $1 receipt.

ChoreographySVG sungold $1 variant
Live specimenClick full / hold $1
Say it back
gm-sunrise.cssLive source
Block 004Click 1220 / hold 1650 ms

Few Understand

Click for the blink and counter-orbits. Hold to spin the same paths wider in gold under the $1 stamp.

Counter-orbittypographygold $1 variant
Live specimenClick full / hold $1
You had to be there
few-understand.cssLive source
Block 005Click 1120 / hold 1480 ms

Buy the Dip

Click for the dip and rebound. Hold to run the same trade with a fatter golden coin and $1 flash.

Line drawSVG coingold $1 variant
Live specimenClick full / hold $1
Red is a discount
buy-the-dip.cssLive source
Block 006Click 1080 / hold 1420 ms

WAGMI

Click for the five-letter stagger. Hold to launch the same letters higher in gold with coins and a $1 receipt.

45 ms staggertypegold $1 variant
Live specimenClick full / hold $1
Probably
wagmi.cssLive source
Block 007Click 1160 / hold 1540 ms

This is Gentlemen

Click for ignition and moon arrival. Hold for a larger golden launch, gilded smoke and a $1 receipt.

SVG rocketignitiongold $1 variant
Live specimenClick full / hold $1
Wen confirmation
this-is-gentlemen.cssLive source
Block 008Click 1450 / hold 1540 ms

On-chain Settlement

Click for a block landing, six BSV sats and SETTLED. Hold to settle the same receipt in gold for $1.

BSV on-chain6 satsgold $1 variant
Live specimenClick full / hold $1
1 sat fee · BSV receipt
onchain-settlement.cssLive source

The minimal handshake

How to wire it

One shared controller drives every study. Release under 800 ms to toggle .liked and fire the full .charged effect. Reach 800 ms to add .premium and .premium-charged: the same study turns gold with a $1 receipt. Early release is always the normal effect. Click awards 21 demo sats; a $1 hold awards 2,100.

  1. 01Copy the baseButton, charge track, paid receipt, coins, states and reduced-motion guard.
  2. 02Add the hookPointer, touch fallback and holdable Space / Enter. Tap is full; hold is $1.
  3. 03Pick a studyPaste its modifier class, markup and exact live CSS, including its gold variant.
Base buttonNo frills
The mechanic is the product
base.cssLive source
like.jsGeneric hook