FORMA Registry

copy-in componenten · contract v1

Elke entry hieronder komt rechtstreeks uit een manifest — niets wordt met de hand bijgehouden. Open een entry voor de live preview, wissel van skin en zie hetzelfde component van huid veranderen: dat is het token-contract aan het werk.

Primitives (46)

accordion

FC-0037accordionv1.0.0

Vragen of hoofdstukken die je openklapt; twee gezichten (display: genummerd en groot, dichte titels gedempt; plain: lijst met chevron), single of multiple. Openklappen via layout-FLIP, geen hoogte-animatie.

button

FC-0003actionv1.0.0

Knop met usePress-gedrag; varianten primary (wit-op-zwart) en ghost; uiterlijk volledig uit het token-contract.

calendar

FC-0046datev1.0.0

Eén datum kiezen met maand én jaar als keuzelijst in de kop (van 1930 naar 2030 in één beweging), pijlen, vandaag-stip en niet-beschikbare dagen. Geen library: ISO-strings, Intl, native select.

color-picker

FC-0043color-pickerv1.0.0laag 2

Ronde kiezer: stippen in ringen die opzij veren als je muis erlangs komt; tik en de ring eromheen neemt die kleur aan. De kleuren komen van het project (palette-functie) — de entry bevat er nul.

combobox

FC-0045comboboxv1.0.0

Kies uit een lange lijst door te typen: een knop toont de keuze, eronder een zoekveld met de gefilterde lijst; pijltjes, Enter, Esc en een vinkje op het gekozen item. Componeert popover en button.

dancing-letters

FC-0027text-playv1.0.0laag 2

Een woord waarvan elke letter zijn eigen choreografie afspeelt bij hover of tik — rubberband, scharnier, hup, omslaan, schuiven, schudden, pop, zweven. Kleur en maat van de ouder.

date-range-calendar

FC-0004date-rangev1.0.0

Periodekiezer over twee maanden (aankomst/vertrek, verhuur, planning) met onbeschikbare en in-behandeling-dagen; geoogst uit het Apoera-boekingssysteem en domein-neutraal gemaakt.

expanding-nav

FC-0021icon-navv1.0.0laag 2

Ronde icoonknoppen die uitrekken tot een pil met het woord erin zodra je erop komt. Voor een korte, visuele navigatie van vijf à zes items.

field

FC-0005inputv1.2.0

Label + input + beschrijving/fout, altijd correct geassocieerd (id/aria); fout gebruikt de status-token.

file-dropzone

FC-0042file-uploadv1.0.0

Sleep bestanden in het vak of klik om te kiezen; lijst met maat en verwijderknop, te grote bestanden geweigerd met melding. Het vak groeit iets en het icoon zweeft op als er iets boven hangt.

folder-stack

FC-0010folder-illustrationv1.0.0

Een map die opent en zijn vellen laat waaieren — beeld voor lege staten, archief of upload. Vorm uit tokens, geen illustratiebestand, dus hij herskint mee.

footer-taped

FC-0055footerv1.0.0

Voettekst als een vel dat met twee stukken plakband op de pagina zit: merk + tagline, kolommen met links en 'binnenkort'-labels, daaronder copyright, juridische links en sociale iconen.

gradient-button

FC-0023actionv1.0.0

Knop met een radiaal verloop dat op hover van plek en spreiding verandert terwijl de rand meedraait — CSS-only via geregistreerde custom properties. Varianten brand en contrast.

hover-expand-gallery

FC-0062image-expandv1.0.0

Rij smalle beeldstroken; de strook onder je muis (of laatst aangetikt) vouwt open tot een breed beeld met onderschrift, de rest schuift samen. Voor portfolio's en fotoreeksen.

hover-preview-list

FC-0057list-previewv1.0.0laag 2

Strakke lijst waarbij boven de rij onder je muis een beeld opduikt dat zachtjes meebeweegt; een balk glijdt naar de rij en keert de tekst om. Op touch een gewone lijst met het beeld ernaast.

hover-reveal-button

FC-0024actionv1.0.0

Pil met een stip die op hover uitgroeit tot de hele knop; het woord schuift weg en keert in de contrastkleur terug met een pijl. Groei via transform, niet via maat.

images-badge

FC-0030avatar-groupv1.0.0

Pil met een stapeltje beelden dat op hover open waaiert; verborgen beelden komen tevoorschijn en een +N telt de rest. Groei van de pil via layout-animatie (FLIP), kaartjes via transform.

infinite-slider

FC-0067sliderv1.0.0laag 2

Verticale eindeloze fotoreeks: wiel of vinger schuift, de beelden lopen na (lerp) en snappen op het dichtstbijzijnde beeld; rechts een meeschuivende minimap met tekst; parallax in de kaarten.

kbd

FC-0047keyboard-hintv1.0.0

Een toets als badge (⌘, K, Esc) en een groepje ervan — sneltoets-hints in zoekvelden, menu's en tooltips.

link-preview

FC-0038link-previewv1.0.0

Link in lopende tekst die op hover (en focus) een klein beeld van de bestemming boven zich toont; het kaartje leunt mee met de muis. Het beeld komt van het project — geen fetch in de entry.

liquid-glass-button

FC-0026actionv1.0.0

Doorzichtige pil die de achtergrond erachter breekt als glas: SVG-filter als backdrop-filter, binnenschaduwen voor de lichtval; valt terug op blur waar de browser geen SVG-backdrop kent.

liquid-metal-button

FC-0025actionv1.0.0laag 2

Pil met een metalen rand die traag draait, sneller bij hover en kort opflitst bij een klik; op de klikplek spreidt een rimpel uit. Zonder shader-runtime: conic-gradient uit tokens + Framer-rotatie.

marquee

FC-0029marqueev1.0.0laag 2

Eindeloze band (logo's, woorden, kaarten) in vier richtingen met vervagende randen en pauze op hover; de inhoud staat er twee keer en schuift precies één kopie.

menubar

FC-0051menubarv1.0.0

Menubalk van een bureaublad-app: titels met uitklapmenu's, wisselen met muis of ← →, items met icoon, sneltoets, scheiding, kopje, checkbox of radio. Componeert popover; aria-menubar zonder library.

motion

FC-0006motionv1.0.0

Spring-wrapper bovenop Framer Motion: tokens in, physics intern; projection, rubberband en de site/app-schaal (MotionScaleProvider).

neon-button

FC-0022actionv1.0.0

Pil met een dunne lichtlijn boven en onder die oplicht bij hover; drie varianten (outline, solid, ghost) en drie maten. De lichtkleur is standaard de merkkleur.

otp-input

FC-0019otpv1.0.0

Invoerveld voor een verificatiecode: losse vakjes die als één veld werken. Plakken vult alles, backspace loopt terug, focus springt naar het eerste lege vakje, en een foute code schudt.

password-strength

FC-0020password-strengthv1.0.0

Meter voor wachtwoordsterkte met de eisen als afvinklijst. Een herkenbaar patroon (welkom123, qwerty, 1234, aaaa) zakt terug naar zwak, hoe lang het ook is.

phone-mockup

FC-0060device-mockupv1.0.0

Telefoonlijst om een schermontwerp in te zetten: model (notch of dynamic island), staand of liggend, schaal, veilige randen, thuisbalkje. Behuizing standaard --foreground, scherm --background; nul letterlijke kleuren.

popover

FC-0007popupv1.0.0

Vanuit een anker openend vlak (menu, popover) met het pop-token: schaal + fade vanuit het anker, Esc/buiten-klik sluit langs dezelfde weg.

press-depth

FC-0014actionv1.0.0

Knop met dikte: hij zakt echt in en kantelt naar de plek waar je hem raakt. Zelfde gedragslaag als Button, ander lichaam.

progress-bar

FC-0018progressv1.0.0

Voortgang in twee gedaanten: gemeten (percentage bekend) en onbepaald (value=null) met een pendel. De kop wisselt mee zonder te verspringen.

radio-glider

FC-0039radiov1.0.0

Verticale keuzelijst (pakketten, tarieven) met een lichtstreep langs de linkerrand die naar de gekozen optie glijdt en daar gloeit. Echte radio-inputs eronder.

reading-progress

FC-0061reading-progressv1.0.0

Dunne balk die meeloopt met hoe ver je in een artikel bent, met 'nog n min' en aan het eind een vinkje met de totale leestijd; plus de hook useReadingProgress voor wie alleen het getal wil.

reorder-list

FC-0015reorderv1.0.0

Lijst die je sleept én met het toetsenbord herschikt (spatie pakt op, pijltjes verplaatsen, Escape zet terug), met uitgesproken bevestiging per zet.

search-field

FC-0048search-inputv1.0.0

Zoekveld met loepje links en de sneltoets (⌘K / Ctrl K) rechts; de sneltoets zet ook echt de focus. Componeert field (1.2.0) en kbd.

sheet

FC-0008sheetv1.0.0

Onderbreekbare, omkeerbare bottom-sheet: 10px-hysteresis, rubberband voorbij open, sluit met de snelheid van het gebaar, mid-vlucht vangen mag.

shining-text

FC-0028text-shinev1.0.0laag 2

Tekst waar een lichtstreep doorheen trekt ('… is aan het denken'): verloop van gedempte naar volle tekstkleur, ambient loop op background-position.

task-steps

FC-0013task-progressv1.0.0

Stappenlijst die live meeloopt met een run: gedaan, bezig, mislukt, nog niet begonnen — met een uitgesproken statusregel voor schermlezers.

text-reveal

FC-0012text-revealv1.0.0laag 2

Tekst die zich woord voor woord (of letter voor letter) scherpstelt terwijl je scrollt: de voortgang hangt aan de scrollpositie, dus terugscrollen draait hem terug.

text-roll

FC-0050text-rollv1.0.0laag 2

Woord dat op hover letter voor letter omhoog rolt terwijl een tweede exemplaar van onderen binnenkomt, vanuit het midden of van links. Voor grote menu-links en koppen.

timeline

FC-0032timelinev1.0.0

Gebeurtenissen op een rij, verticaal of horizontaal, met een statusstip en lijn per stap; statussen neutraal/wacht/bezig/klaar/fout, tijdstip via Intl, vrije inhoud per item.

toggle

FC-0040togglev1.0.0

Knop die aan of uit staat (aria-pressed) plus een groep met één of meerdere gekozen, horizontaal of verticaal. Op de usePress-laag; varianten default/outline, drie maten.

use-async-action

FC-0016async-actionv1.0.0

De toestandsmachine onder elke knop die iets wegstuurt: bezig, gelukt of mislukt, en vanzelf terug naar rust. Voorkomt dubbel afvuren, verouderde uitkomsten en state na unmount.

use-press

FC-0009pressv1.0.0

Apple-gedragslaag voor tapbare elementen: touch-down zonder vertraging, hit-marge, wegslepen-annuleert/terugslepen-herstelt; activatie via onPress.

use-toggle

FC-0041toggle-statev1.0.0

Hook: een boolean met een vaste toggle-functie — [waarde, wissel, zet].

Blocks (21)

account-menu

FC-0052account-menuv1.0.0

Paneel achter je naam: portret, naam en e-mail, koppelingen met een pijltje op hover, en uitloggen in de statuskleur; alles schuift bij het openen één voor één van links in.

action-searchbar

FC-0049search-actionv1.0.0

Zoekveld dat bij focus een lijst acties toont en filtert terwijl je typt; loep wisselt naar verzendpijl zodra er tekst staat. Klik, pijltjes en Enter kiezen. Componeert field.

async-button

FC-0017action-feedbackv1.0.0

Receptuur: de bestaande knop met de async-toestandsmachine erin en vier gezichten die over elkaar wisselen — rust, bezig, gelukt, mislukt. De maat blijft staan tijdens het wisselen.

audit-log

FC-0058audit-logv1.0.0

Logboek van gebeurtenissen met een lijn door de iconen, labels voor soort en status, filters op wie/soort/status plus zoekveld, en per regel een rechtsklik- of ⋯-menu met acties van het project. Componeert search-field.

background-paths

FC-0031hero-backgroundv1.0.0laag 2

Hero met 72 trage, dunne lijnen die als stromen over het vlak trekken; de titel komt letter voor letter omhoog, de actie eronder is een slot. Lijnen kleuren met currentColor, dus het blok herskint mee.

booking-inquiry

FC-0001bookingv1.0.0

Boekingsaanvraag-formulier: periode, gasten, prijsopbouw (nachten + toeslag + borg) en gastgegevens; verstuurt via het onSubmit-contract van het project.

booking-section

FC-0002booking-flowv1.0.0

Receptuur: kalender + aanvraag-formulier met gedeelde periodeselectie in twee richtingen (kalenderklik vult de velden, getypte datum kleurt de kalender).

chat-layout

FC-0059chatv1.0.0

Driedelige berichten-indeling: navigatie, gesprekkenlijst met zoekveld, en het gesprek met kop, berichtenvlak (slot) en typbalk met bijlage-menu. Smal: lijst óf gesprek met terugknop. Componeert search-field, field, button en popover.

command-palette

FC-0053command-palettev1.0.0

Het ⌘K-venster: dialoog met zoekregel en lijst opdrachten (icoon, titel, toelichting, categorie), live gefilterd, ↑ ↓ Enter Esc, lege staat met wisknop. Sneltoets werkt paginabreed.

coverflow-carousel

FC-0066carouselv1.0.0

Vijf kaarten in een 3D-waaier: de middelste recht met tekst en knop, de buren gedraaid en donkerder; de achtergrond is de foto in focus, vaag. Pijlen, stippen, pijltjestoetsen, swipe en autoplay.

dither-hero

FC-0063herov1.0.0laag 2

Grote afgeronde kaart als oproep: label met pulserende stip, kop, toelichting en actie; op de achtergrond een gerasterde vlek in de merkkleur die traag drijft en versnelt onder de muis. Zonder shader: SVG-stippenraster + drijvend mask.

empty-state

FC-0011empty-statev1.0.0

De lege staat: beeld, wat er ontbreekt, wat je eraan doet. Alle tekst en de actie zijn slots; het beeld is standaard de folder-stack maar mag alles zijn.

hero-carousel

FC-0065hero-carouselv1.0.0laag 2

Paginavullende hero als filmstrook: kaarten delen één bovenrand, de kaart in focus ontvouwt tot volle hoogte, buren blijven halfhoog geknipt, de achtergrond kleurt mee. Wiel, slepen, klik, pijltjes, autoplay.

notification-popover

FC-0054notificationsv1.0.0

Bel met teller voor ongelezen meldingen; een klik opent een paneel met de lijst, 'alles gelezen' bovenin, elke melding gelezen zodra je hem aanraakt. Componeert popover en button.

sign-in

FC-0044sign-inv1.0.0

Inlogpagina: e-mail, wachtwoord met oog-knop, aangemeld blijven, wachtwoord vergeten, inloggen, andere aanbieders en account aanmaken; rechts een vrij vlak. Elementen komen na elkaar in beeld.

spotlight-hero

FC-0064hero-3dv1.0.0

Donkere kaart in twee helften: links kop en tekst, rechts een scène-slot (3D, video, beeld — het project kiest), met een zachte lichtvlek die de muis volgt.

stacked-list

FC-0056stacked-listv1.0.0

Ledenkaart: actieve leden met zoekveld bovenin; onderin een balk met drie portretten en +N die op een tik de kaart vult met de volledige lijst en eigen zoekveld. Rijen komen schuin binnen. Componeert search-field.

stagger-testimonials

FC-0034testimonial-carouselv1.0.0

Citaten als een rij scheve kaarten met een afgeschuinde hoek; de middelste staat hoog in de merkkleur. Klik op een kaart en hij schuift naar het midden; pijlen doen één stap.

testimonial-columns

FC-0036testimonial-columnsv1.0.0laag 2

Kop met daaronder drie kolommen citaten die elk in hun eigen tempo omhoog schuiven en boven en onder vervagen; smal één kolom, middelbreed twee. Componeert marquee.

testimonial-grid

FC-0033testimonialv1.0.0

Bento van citaten in drie kolommen: per kaart een toon (neutraal met raster, accent, contrast) en een hoogte, zodat het een compositie is. Kaarten komen scherp in beeld bij het scrollen (blur + zakken).

testimonial-wall

FC-0035testimonial-marqueev1.0.0laag 2

Vier verticale banden korte reacties, gekanteld in een 3D-vlak, om en om omhoog en omlaag; randen vervagen naar de achtergrond. Componeert marquee voor het schuiven.

Zo oogst je

  1. Open Claude Code in de Websites-map en typ /oogst met je bron — bijvoorbeeld /oogst het reviewsysteem van Apoera.
  2. De poortwachter controleert eerst of de capability al bestaat. Bestaat er iets soortgelijks, dan stopt de oogst en beslis jij: vervangen, of als nieuwe versie ernaast. Is het vrij, dan geeft npm run registry id-issue een nieuw, uniek component-ID uit (de FC--code op elke kaart). Eén component, één ID — nummers worden nooit hergebruikt.
  3. Het component wordt ontleed in losse onderdelen en herschreven op het token-contract: klant-teksten worden slots, API-calls worden datacontracten, kleuren worden tokens. Wat al in de registry zit (button, field, sheet) wordt hergebruikt.
  4. Manifest + live demo erbij, npm run verify moet groen zijn — en de nieuwe entry verschijnt vanzelf op deze pagina, met preview en skin-wisselaar.

Eén regel om te onthouden: oogsten is herschrijven op het contract; de bron is referentie en blijft onaangeroerd.