diff --git a/src/components/Doodles/index.tsx b/src/components/Doodles/index.tsx new file mode 100644 index 0000000..021a624 --- /dev/null +++ b/src/components/Doodles/index.tsx @@ -0,0 +1,123 @@ +/* + * Hand-drawn brand marks used to accent section headings. Each one positions + * itself absolutely, so the element it decorates has to be `relative` — for the + * word-level marks that means a `relative inline-block` span wrapping the word, + * so they measure against the word rather than the whole heading line. + */ + +/* + * Marker loop around a highlighted word, in the spirit of a circled word on + * paper: it overshoots and crosses itself rather than closing cleanly. + * preserveAspectRatio="none" stretches it to whatever the word measures, and + * non-scaling-stroke keeps the line an even weight through that stretch. + */ +export function CircleScribble() { + return ( + + + + ); +} + +/* Sparkle that sits over a highlighted word (Union.svg). */ +export function Sparkle() { + return ( + + + + ); +} + +/* + * The rotation lives inside the keyframe rather than in a `rotate-*` class, + * because an animated `transform` replaces the one Tailwind composes — the hand + * would snap upright the moment the animation took over. Rotated ~195deg, a + * negative translateY runs down-and-slightly-left in page space, so the gesture + * reads as poking at the frame below. Reduced motion keeps the pose, drops the + * movement. + */ +const handMotion = ` + @keyframes pjPoint { + 0%, 100% { transform: rotate(195deg) translateY(0); } + 50% { transform: rotate(195deg) translateY(-12px); } + } + + .pjPoint { animation: pjPoint 2.4s ease-in-out infinite; } + + @media (prefers-reduced-motion: reduce) { + .pjPoint { animation: none; transform: rotate(195deg); } + } +`; + +/* + * Hand (Vector.svg) that reaches toward whatever sits below it. The source art + * has the fingers pointing up, so it is flipped to angle down into the target. + * It hangs off the top edge of its parent, which must be `relative` and must + * leave enough headroom above itself for the hand to occupy — see the frame + * wrapper in FigmaDemo. Kept off phones, where there is no room beside the + * frame for it to sit without covering the content. + */ +export function PointingHand() { + return ( + <> + + + + + + ); +} + +/* Smiley parked in a band's corner (Group 1000011090.svg). */ +export function SmileyDoodle() { + return ( + + + + + + ); +} diff --git a/src/components/FigmaDemo/index.jsx b/src/components/FigmaDemo/index.jsx index 800ca94..1d28f70 100644 --- a/src/components/FigmaDemo/index.jsx +++ b/src/components/FigmaDemo/index.jsx @@ -1,20 +1,51 @@ +import { PointingHand } from "../Doodles"; + +const PROTOTYPE_SRC = + "https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2F7BpOmi30JgG6gIaE0T7fL4%2FPayjoin-Designs-Bitcoin-Wallet-UI-Kit-%2526-Design-System%3Fpage-id%3D4263%253A62592%26node-id%3D4954%253A70101%26viewport%3D-4364%252C-2385%252C0.48%26scaling%3Dmin-zoom%26starting-point-node-id%3D4954%253A70101"; + +/* + * Lightest band on the page: it lifts the demo out of the dark testimonial band + * above and steps back down into the closing band below, so the page reads + * darkest → lightest → settling rather than flat. + */ export default function FigmaDemo() { return ( -
-
-

Try it Yourself

- - Click through the app to see all it takes to payjoin - -