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.

Hero's (27)

Het openingsvlak van een pagina: kop, beeld, eerste actie.

background-paths

FC-0031hero-backgroundblockv1.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.

banner-hero

FC-0163hero-bannerblockv1.0.0laag 2

Schermvullende hero op een filmisch beeld: bovenin logo en een glazen pil met links en een lichte actieknop; in het midden een aankondigingspil, een kop in twee regels, toelichting en twee ronde knoppen; onderaan partnerlogo's. De delen verschijnen na elkaar. Componeert announcement en button.

centered-hero

FC-0103hero-centeredblockv1.0.0

Gecentreerde hero op een achtergrondbeeld: aankondigingspil met 'lees meer', grote kop, toelichting en twee acties naast elkaar. Het beeld is een slot; de tekst staat op een lichte waas van de achtergrondkleur zodat hij op elk beeld leesbaar blijft.

cinematic-hero

FC-0160hero-cinematicblockv1.0.0laag 2

Schermvullende, afgeronde hero op een video met korrel en verloop; bovenin een zwevende menubalk met afgeronde onderhoeken, onderin één reusachtig woord dat woord voor woord opkomt (met sterretje), naast een korte tekst en een pil-knop met ronde pijlkop. Componeert motion en use-press.

clip-split-hero

FC-0157hero-clip-splitblockv1.0.0laag 2

Gesplitste hero: links logo met slogan, vette kop, een streep in de merkkleur, toelichting en een gespatieerde tekstlink; onderaan drie contactgegevens met icoon. Rechts een beeld dat bij verschijnen vanuit de rechterrand openschuift tot een schuine snede (clip-path). Alles komt na elkaar omhoog.

collage-hero

FC-0162hero-collageblockv1.0.0laag 2

Redactionele hero in twee kolommen: links kop, toelichting en twee acties (knop + tekstlink); rechts een collage van twee overlappende beelden (hoofdbeeld groot, tweede kleiner en licht gedraaid) op een zachte, vervaagde was van een derde beeld. Tekst en collage komen scherp in beeld (blur + zakken). Componeert button.

container-scroll

FC-0098scroll-tilt-showcaseblockv1.0.0laag 2

Kop met daaronder een schermkaart die achterover gekanteld begint en met de scroll rechtop komt, licht krimpt en omhoog schuift — de product-in-perspectief-hero. Dikke lijst op de tekstkleur met het schermbeeld erin.

dashboard-hero

FC-0158hero-dashboardblockv1.0.0laag 2

SaaS-hero met glazen menubalk (logo, links, knop), aankondigingspil, grote kop, toelichting, twee knoppen en daaronder een schermkaart met het dashboard-beeld op een halfdoorzichtig vlak; twee lichtbanen in de merkkleur linksboven en een waas die naar onderen vervaagt. Alles komt op volgorde omhoog. Componeert announcement en button.

dither-hero

FC-0063heroblockv1.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.

fashion-hero

FC-0164hero-fashionblockv1.0.0laag 2

Modehero in twee kolommen: rechts een groot beeld met afgeronde hoeken, slagschaduw en een zachte gloed in de merkkleur erachter; links de merknaam kolossaal, een lijst categorieën die bij hover opveren, en onderaan een seizoenkop met redactionele tekst.

floating-hero

FC-0166hero-floatingblockv1.0.0

Speelse hero: in het midden een kop in de merkkleur met toelichting, eromheen uitgesneden beelden die elk op hun eigen plek zacht op en neer zweven (vertraging per beeld), en op de achtergrond twee grote, dunne krullen in een zachte tint van de merkkleur. Statisch verder.

frame-sequence-hero

FC-0088scroll-sequence-heroblockv1.0.0laag 2

Hero waarin een reeks beelden (honderden frames, een uitgepakte video) met de scroll wordt doorgespoeld: vastgezet podium, navigatiebalk met merk, links en actie, grote kop, en zwevende glazen stapkaarten die per segment verschijnen met genummerde streepjes die vollopen. Laadbalk tot de eerste frames binnen zijn; voortgangsbalk onderin. Naar Apple's productpagina's.

grid-lines-hero

FC-0165hero-grid-linesblockv1.0.0

Schermvullende hero op een beeld met een sluier in de achtergrondkleur en vijf dunne verticale lijnen (1/3/4/3/1-raster); in het midden een grote kop, lichte toelichting en de pil-knop met doorschuivende pijl. Componeert de gedeelde pill-arrow-button.

hero-carousel

FC-0065hero-carouselblockv1.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.

icon-cascade-hero

FC-0101hero-icon-cascadeblockv1.0.0laag 2

Hero in vier fasen op de scroll: een diavoorstelling als achtergrond vervaagt terwijl een strook beeldtegels onderin één voor één omhoog komt; de strook vliegt naar het midden en krimpt; de tegels vliegen elk naar hun plek tussen de woorden van de kop; en de kop verschijnt segment voor segment in een vaste-willekeurige volgorde.

infinity-hero

FC-0151hero-infinityblockv1.0.0laag 2

Schermvullende hero waarin 36 oneindig-tekens eindeloos worden getekend en vervagen, met een traag draaiende gloed erachter; in het midden een kop die letter voor letter omhoog komt, een ondertitel en een streep die van binnenuit opengaat. Optioneel een glas- of vlakpaneel achter de kop met zwevende stipjes; acties als children.

layered-parallax-hero

FC-0159hero-parallax-layersblockv1.0.0laag 2

Schermhoge hero van vier lagen (drie beelden en een titel ertussen) die op de scroll elk met een eigen snelheid zakken (70/55/40/10%): de achterste het snelst, de voorste bijna niet — diepte. Onderaan vervaagt het beeld naar de achtergrondkleur; de sectie eronder is een slot.

marquee-hero

FC-0099hero-marqueeblockv1.0.0laag 2

Hero met een label-pil, een kop die woord voor woord binnenkomt, toelichting en actie, en onderin een eindeloze band foto's die om en om licht gekanteld staan en boven en onder vervagen. Componeert marquee.

minimalist-hero

FC-0161hero-minimal-portraitblockv1.0.0laag 2

Schermhoge, rustige hero: bovenin merknaam en gespatieerde links, in het midden een uitgesneden portret vóór een grote cirkel in de merkkleur, links een korte tekst met 'lees meer', rechts een kolossale kop in twee regels; onderaan sociale iconen en een plaatsnaam. Alles komt na elkaar op.

parallax-hero

FC-0155hero-parallaxblockv1.0.0laag 2

Hero van drie rijen kaarten die op de scroll in perspectief kantelen, rechtop komen en langs elkaar schuiven (rij 1 en 3 naar rechts, rij 2 naar links); de stapel draait van 15° naar 0°, zakt en wordt zichtbaar. Boven de stapel een kop met toelichting; kaarten liften bij hover en tonen hun titel.

scroll-expand-media

FC-0097scroll-expand-heroblockv1.0.0laag 2

Hero waarin een video of foto in het midden klein begint en met de scroll opengaat tot hij het podium vult; de titel splijt in twee helften die naar buiten schuiven, de achtergrondfoto vervaagt en de inhoud eronder komt pas als het beeld open is. Sticky podium, clip-path als reveal — geen gekaapt wiel.

shader-hero

FC-0154hero-shaderblockv1.0.0

Hero op een bewegend vlak (slot: noise-gradient, shader-background, video): bovenin een balk met logo, pil-links en een 'gooey' inlogknop waar bij hover een ronde pijlknop uit vloeit; linksonder een glazen badge, een kop met cursief accent, korte tekst en twee knoppen. Componeert button; het vlak is van het project.

signup-hero

FC-0102hero-signupblockv1.0.0

Gesplitste hero met links een aankondigingspil, kop, toelichting, een e-mailveld met knop en een korte opsomming, en rechts een groot app-beeld dat links in de achtergrond vervaagt. Het formulier meldt het adres via onSubmit. Componeert button.

split-cards-hero

FC-0100hero-split-cardsblockv1.0.0laag 2

Kop links, toelichting en sociaal bewijs (regel + rij portretten) rechts, daaronder twee beeldkaarten met titel, subregel en een actie over het beeld heen. Met animation=subtle komt alles bij in beeld komen één voor één omhoog. Componeert avatar-circles.

split-image-hero

FC-0156hero-split-imageblockv1.0.0

Hero in twee helften: links een schermhoog beeld, rechts een kop met lichte toelichting, een rij portretten met teller, een pil-knop waarvan de pijl bij hover door de ronde kop schuift, en onderaan een lopende band met logo's. Componeert avatar-circles en marquee.

spotlight-hero

FC-0064hero-3dblockv1.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.

video-glass-hero

FC-0153hero-videoblockv1.0.0

Schermvullende hero op een video: bovenin een glazen aankondigingspil (label + tekst), een grote kop met cursief accent, toelichting en twee knoppen; rechtsboven optioneel een glazen schakelaar tussen schermvullend en op-inhoud. Componeert button.

Navigatie (9)

Menu's, menubalken, zijbalken, tabs en opdrachtvensters.

action-searchbar

FC-0049search-actionblockv1.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.

command-palette

FC-0053command-paletteblockv1.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.

expanding-nav

FC-0021icon-navprimitivev1.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.

hover-sidebar

FC-0131sidebarblockv1.0.0

Smalle iconenrail die uitklapt zodra je erop komt of er met het toetsenbord in belandt: de labels schuiven naast de iconen in. Boven een kop-slot (logo), onder een voet-slot (profiel). Smal (< 48rem) wordt het een bovenbalk met een menuknop die een schermvullend paneel van links inschuift (Escape sluit). Links zijn <a> met href of knoppen met onPress.

kinetic-menu

FC-0090fullscreen-menublockv1.0.0laag 2

Paginavullend menu van een verhalende site: balk met logo en een knop waarvan de tekst omhoog rolt (Menu → Sluiten) terwijl het plusje een kruisje wordt; een paneel schuift van rechts in, in drie lagen die elkaar volgen, en de grote links komen één voor één van onderen omhoog met een lichte draai. Op hover verschijnen abstracte vormen op de achtergrond, per link een andere. Primaire links blijven op desktop in de balk (vindbaarheid).

menubar

FC-0051menubarprimitivev1.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.

sidebar-nav

FC-0132sidebar-navblockv1.0.0

Navigatiekolom van een dashboard: werkruimte-wisselaar bovenin (initiaal-tegel, naam, plan, popover met werkruimtes en 'nieuwe werkruimte'), groepen met kopje en items met icoon, label, badge, sneltoets (op hover) en optioneel kinderen die in- en uitklappen met een verbindingslijn; onderaan vaste items boven een hairline. Kiezen meldt onSelect; gestuurd of met eigen staat. Componeert popover.

slide-tabs

FC-0121slide-tabsprimitivev1.0.0laag 2

Pil met tabbladen waarin een donkere schuif meeglijdt naar de tab waar je op komt en terugvalt naar de gekozen tab als je weggaat; de tekst keert om via difference-blend. Voor een korte navigatie of een keuze tussen vier à zes dingen.

tabs

FC-0120tabsprimitivev1.0.0

Tabbladen zonder library: drie gezichten (verdiept vlak, losse knoppen, onderstreep), vier maten, pil-vorm, icoon-slot en disabled; pijltjes/Home/End lopen door de tabs met roving tabindex; panelen met de juiste aria-koppeling.

Secties (7)

Paginadelen tussen hero en footer: kenmerken, cijfers, projecten, team, FAQ, slotoproep.

accordion

FC-0037accordionprimitivev1.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.

clip-showcase

FC-0169clip-showcaseblockv1.0.0laag 2

Menu van genummerde, kolossale titels links en rechts één beeld dat door een wisselende uitsnede heen leeft: het beeld zit in een SVG-clip van vormen (balken, blokken, 3×3-raster) die in willekeur opengaan, ademen en sluiten, in een lus. Op hover of focus van een titel wisselen beeld en uitsnede; de actieve titel schuift naar rechts en het nummer kleurt in de merkkleur.

cta-marquee

FC-0073ctablockv1.0.0

De afsluitende oproep van een pagina: een reusachtige, bijna onzichtbare lopende band met één zin erachter, en daarvoor gecentreerd een label, de kop, een toelichting, de knop en een voetnoot. Receptuur: marquee + knop-slot.

feature-split

FC-0110feature-imageblockv1.0.0

Eén kenmerk in twee helften: een badge, kop en toelichting naast een groot beeld (slot), links of rechts; smal komt het beeld boven de tekst. Het lichtste inhoudsblok van een landingspagina.

project-grid

FC-0112project-gridblockv1.0.0laag 2

Raster van projectbeelden met wisselende breedtes (5/7, 7/5 op twaalf kolommen), elk met de titel als donkere pil en een ronde pijlknop over het beeld; de kaarten komen omhoog zodra ze in beeld komen. Voor werk, cases en portfolio.

stats-bento

FC-0111statsblockv2.0.0

Vier cijfers in een bento-raster: één groot vlak op --primary (label, groot getal, toelichting, schuine arcering naar de hoek), een groeikaart met staafjes, een klein telvlak en een beoordelingsvlak met glyph. Smal stapelt alles; breed 6 kolommen × 2.

team-drawer

FC-0134teamblockv1.0.0

Het team als raster van portretten; op hover kleurt het beeld grijs en schuift een balk met naam, functie en pijl omhoog. Een tik opent een schermhoog paneel van rechts (overlay + spring) met sluitknop, teller n/totaal, portret, naam, functie, biografie en links; de inhoud verschijnt zodra het paneel staat. Escape en de overlay sluiten; de pagina erachter scrolt niet mee. Componeert button.

Testimonials & logo's (10)

Sociaal bewijs: klantreacties, logo-stroken, avatar-rijen.

avatar-circles

FC-0094avatar-circlesprimitivev1.0.0

Rij overlappende portretten met aan het eind een +N: het kleinste sociale bewijs. Rand in de achtergrondkleur zodat de overlap leest, initialen zonder beeld, +N als badge, link of knop. Zusje van images-badge (dat waaiert open); dit staat stil.

images-badge

FC-0030avatar-groupprimitivev1.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.

logo-grid

FC-0095logo-gridprimitivev1.0.0

Raster van logotegels als sociaal bewijs: elke tegel een vlak op --background met het logo in het midden, de naden in --border. Twee kolommen smal, vier breed. Logo's grijs tot hover; inverteren voor donkere vlakken. Het raster-zusje van logo-strip (één rij).

logo-lattice

FC-0148logo-latticeprimitivev1.0.0

Rooster van logotegels met een dragende lijn: twee kolommen (vier vanaf 48rem), elke tegel omlijnd, om en om een gedempt vlak, plusjes op de kruispunten; boven en onder een lijn over de volle vensterbreedte. Statisch.

logo-strip

FC-0082logo-cloudprimitivev1.0.0

Eén rij grijze logo's met een klein kapitaal regeltje erboven (“Vertrouwd door…”) — het lichtste vertrouwenssignaal op een landingspagina; logo's kleuren op hover terug. Optioneel inverteren voor donkere vlakken.

stagger-testimonials

FC-0034testimonial-carouselblockv1.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-columnsblockv1.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-0033testimonialblockv1.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-spotlight

FC-0083testimonial-carouselblockv1.0.0laag 2

Een kop die woord voor woord scherp komt zodra de sectie in beeld is, en daaronder één citaat in de schijnwerper met een rij portretten: het gekozen portret groter en omrand. Het citaat wisselt vanzelf, stopt onder de muis, bij focus en onder reduced motion; een portret aantikken kiest direct.

testimonial-wall

FC-0035testimonial-marqueeblockv1.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.

Prijzen (2)

Prijstabellen en pakketkeuze.

starfield-pricing

FC-0146pricing-tableblockv1.0.0laag 2

Prijssectie op een sterrenveld: kop en toelichting, een maand/jaar-schakelaar met glijdende pil, en drie kaarten (de populaire iets hoger met dubbele rand in de merkkleur en een label erboven). Prijzen veren naar hun nieuwe waarde bij het wisselen; de sterren twinkelen en trekken zacht naar de cursor. Kaarten komen omhoog zodra ze in beeld komen.

tiers-pricing

FC-0147pricing-tiersblockv1.0.0laag 2

Prijssectie met vier treden: kop, frequentie-schakelaar (glijdende pil met kortingsbadge) en een raster van kaarten. 'popular' krijgt een ring in de merkkleur, een badge en een zachte gloed; 'highlighted' is omgekeerd (tekstkleur als vlak met een vervagend rasterpatroon). Getalprijzen veren naar hun nieuwe waarde; tekstprijzen ('Gratis', 'Op maat') staan gewoon.

Knoppen (11)

Alle knoppen: van de basisknop tot expressieve varianten.

arrow-button

FC-0145actionprimitivev1.0.0

Pil in de primaire kleur waarvan de pijl de cursor volgt (360°, kortste draai) en die bij hover van binnenuit omkeert: een cirkel in de achtergrondkleur groeit vanuit het midden tot hij de pil vult, de tekst kleurt mee. Indrukken via usePress.

async-button

FC-0017action-feedbackblockv1.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.

button

FC-0003actionprimitivev1.0.0

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

coupon-reveal

FC-0081couponprimitivev1.0.0

Een knop als sticker: op hover krult de hoek om, de eerste druk pelt de sticker weg en toont de kortingscode, de tweede druk kopieert hem en meldt dat kort. Sticker in de primaire kleur, gekopieerd in de succeskleur.

gradient-button

FC-0023actionprimitivev1.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-reveal-button

FC-0024actionprimitivev1.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.

liquid-glass-button

FC-0026actionprimitivev1.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-0025actionprimitivev1.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.

magnetic-button

FC-0109actionprimitivev1.0.0laag 2

Knop die naar de aanwijzer toe trekt (veer op x/y met een lichte kanteling), een lichtvlek onder de aanwijzer, een traag draaiende lichtrand bij hover en een rimpel waar je klikt; met loading een spinner. Eén look op de tokens, eigen lichtrand als CSS-gradient (projectdata).

neon-button

FC-0022actionprimitivev1.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.

press-depth

FC-0014actionprimitivev1.0.0

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

Badges & banners (4)

Labels, aankondigingen, sneltoets-badges en promotiebalken.

announcement

FC-0142announcementprimitivev1.0.0

Pil die iets aankondigt: links een kleine tag ('Nieuw', 'Versie 7.8'), rechts de titel met optioneel een icoon. Vijf tonen uit de status-tokens en twee vormen van de tag: ingebed of 'raised' (los kaartje met rand op een gedempt vlak). Als link of knop tapbaar, anders een statisch label.

hero-badge

FC-0144hero-badgeprimitivev1.0.0laag 2

De pil boven een hero-kop: icoon vóór, tekst, icoon erna; komt van boven in en het voorste icoon kantelt en kleurt naar --primary als je erop komt. Als link of knop. Drie vormen (default, outline, ghost) en drie maten (typerollen label, tekst-klein, tekst).

kbd

FC-0047keyboard-hintprimitivev1.0.0

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

promo-banner

FC-0143promo-bannerprimitivev1.0.0laag 2

Smalle promotieregel in de info-kleur: een onderstreepte actie, een korte toelichting en optioneel een sluitknop. Schuift bij verschijnen van rechts in; zodra je op de actie komt, zweven twee tandwielen uit de hoeken.

Formulieren (17)

Invoervelden, keuzelijsten, uploads, handtekening en formulier-indeling.

channel-list

FC-0124checkbox-listprimitivev1.0.0

Lijst keuzes met vinkje, icoontegel, naam en toelichting, gescheiden door hairlines; de tegel kleurt mee zodra het vinkje aanstaat. Voor meldingskanalen, rechten, voorkeuren — alles wat 'welke van deze?' vraagt. Gestuurd of met eigen staat, formulier-naam optioneel.

color-picker

FC-0043color-pickerprimitivev1.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-0045comboboxprimitivev1.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.

field

FC-0005inputprimitivev1.2.0

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

field-layout

FC-0117form-layoutprimitivev1.0.0

Bouwstenen om formulieren op te maken zonder het veld zelf te kennen: FieldSet met legenda, FieldGroup, FieldRow (verticaal, horizontaal of responsief), FieldContent naast een vinkje, FieldLabel (ook als kaart die oplicht als het vinkje aanstaat), FieldTitle, FieldDescription, FieldSeparator met tekst en FieldError. Zusje van field (FC-0005).

file-dropzone

FC-0042file-uploadprimitivev1.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.

image-cropper

FC-0129image-cropperprimitivev1.0.0

Beeld kiezen, bijsnijden en teruggeven: eerst een neerzetvak (file-dropzone), dan een rond of vierkant kader waarin je het beeld sleept (muis, touch, pijltjes), inzoomt (schuif 1–3×) en per 90° draait, en na Bijsnijden het resultaat met een vinkje. onCrop krijgt een PNG als data-URL en blob; uploaden is een projectzaak.

otp-input

FC-0019otpprimitivev1.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-strengthprimitivev1.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.

radio-fluid

FC-0076radioprimitivev1.0.0

Verticale keuzelijst: het vlak achter de gekozen rij glijdt mee naar een nieuwe keuze, een lichter vlak volgt de aanwijzer van rij naar rij, en de stip verschijnt met een veer. Echte radio-inputs eronder; optioneel een uitlegregel per optie en een compacte stand.

radio-glider

FC-0039radioprimitivev1.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.

search-field

FC-0048search-inputprimitivev1.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.

select

FC-0074selectprimitivev1.0.0

Eén waarde kiezen uit een korte, vaste lijst: een knop toont de keuze, eronder een lijst met een vinkje op het gekozen item. Zonder zoekveld (dat is combobox), wél type-ahead, pijltjes, Home/End, Enter en Esc. Componeert popover en button; `name` geeft een verborgen input voor formulieren.

signature-pad

FC-0078signatureblockv1.0.0

Een document ondertekenen op drie manieren — tekenen met drukgevoelige inkt, je naam typen in een schrijfletter, of een scan uploaden — plus hergebruik van bewaarde handtekeningen. Resultaat: bijgesneden PNG (2×) en, bij tekenen en typen, een SVG. Schrijfletters en inktkleuren komen van het project.

textarea

FC-0075textareaprimitivev1.0.0

Het meerregelige zusje van field: label + textarea + beschrijving of fout, correct geassocieerd. Groeit mee met de inhoud tussen een minimum en maximum aantal regels (field-sizing: content, met meting als terugval). Optionele teller bij maxLength.

toggle

FC-0040toggleprimitivev1.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.

upload-card

FC-0130upload-cardblockv1.0.0

Kaart om bestanden aan te leveren: icoon, titel en toelichting bovenin, daaronder het neerzetvak met de gekozen bestanden (file-dropzone), en een voet met telling, een tweede actie (slot) en de hoofdknop die pas actief wordt zodra er iets gekozen is. onSubmit krijgt de files; uploaden is een projectzaak. Componeert file-dropzone en button.

Kalender & boeking (5)

Datumkiezers, periodeplanning en boekingsstromen.

booking-inquiry

FC-0001bookingblockv1.0.0

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

booking-section

FC-0002booking-flowblockv1.0.0

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

calendar

FC-0046dateprimitivev1.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.

date-range-calendar

FC-0004date-rangeprimitivev1.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.

period-planner

FC-0077period-planningblockv1.0.0

Een periode kiezen (sprint, verhuur, verlof, campagne) met daaronder een samenvatting: begin, einde, duur in dagen en een extra vak dat het project invult (sprintnummer, prijs, nachten). Receptuur: date-range-calendar + samenvatting.

Kaarten (4)

Kaartvormen met eigen gebaar: kantelen, gloeien, waaieren, omdraaien.

glow-card

FC-0108glow-cardprimitivev1.0.0

Een kaart waarvan de rand oplicht waar de aanwijzer is: een zachte lichtvlek in de merkkleur op de achtergrond en een scherpe lichtlijn op de rand die met de muis meeloopt, ook als die naast de kaart is. De rand is een masker (padding-box ⊕ border-box) zodat alleen de ring licht vangt.

hover-stack

FC-0070card-stackprimitivev1.0.0

Een waaier van overlappende, licht gedraaide kaarten; de kaart onder je muis komt recht en omhoog, de buren wijken opzij. Kleuren per kaart komen van het project. Op touch een kolom kaarten.

product-card

FC-0079product-cardblockv1.0.0

Eén product in een winkel: beeld dat licht inzoomt op hover, badge, hartje voor de verlanglijst, sterren, prijs met korting (Intl, valuta van het project) en een knop die zelf zijn feedback toont — bezig, toegevoegd, mislukt. Receptuur: async-button + usePress.

tilt-card

FC-0107tilt-cardprimitivev1.0.0

Een kaart die met de aanwijzer meekantelt (3D, max 11°) en licht groeit, met een lichtvlek die de aanwijzer volgt; op aanraakschermen werkt vasthouden als hover. Vier CSS-variabelen per animatieframe, geen React-render per beweging.

Tekst & typografie (8)

Tekst die beweegt: onthullen, rollen, roteren, samenkomen.

dancing-letters

FC-0027text-playprimitivev1.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.

scroll-converge

FC-0105scroll-convergeprimitivev1.0.0laag 2

Letters (of iconen) die van ver uit elkaar naar hun plek komen terwijl je scrolt: elk onderdeel start op een afstand evenredig met zijn afstand tot het midden en landt halverwege de sectie. Drie gezichten: text (schuiven + kantelen), icons (schuiven, zakken, groeien) en icons-rotate (ook draaien). Sticky podium.

shining-text

FC-0028text-shineprimitivev1.0.0laag 2

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

text-convergence

FC-0069text-convergenceprimitivev1.0.0laag 2

Een zin die als één regel horizontaal door het beeld schuift terwijl je scrolt; elke letter komt van een eigen hoogte en draaiing aangevlogen en landt zodra hij het beeld binnenkomt. Sticky podium in een hoge sectie, geen pin-spacer.

text-reveal

FC-0012text-revealprimitivev1.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-rollprimitivev1.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.

text-rotate

FC-0104text-rotateprimitivev1.0.0laag 2

Een woord of zin die om de zoveel tijd (of op aanroep via een ref: next/previous/jumpTo/reset) wisselt met de volgende uit een lijst: de oude tekst schuift omhoog weg, de nieuwe komt van onderen, letter voor letter of woord voor woord met een stagger; de breedte past zich met een layout-animatie aan.

variable-font-hover

FC-0152variable-font-textprimitivev1.0.0laag 2

Regel tekst waarvan de letters bij hover één voor één van de ene font-variation-instelling naar de andere veren (gewicht, schuinte — welke assen het lettertype heeft), met stagger vanaf de eerste, laatste of middelste letter. Twee regels met omgekeerde instellingen geven de kruisende hero-kop van de bron. Vereist een variabel lettertype in het project.

Media & galerij (11)

Beeld, video, carrousels, lopende banden en hover-voorbeelden.

blur-reveal

FC-0072blur-revealprimitivev1.0.0laag 2

Een beeld dat mat en wazig staat en scherp wordt waar de aanwijzer net is geweest — een spoor dat langzaam weer dichtvriest. 2D-canvas, geen shader, geen asset. Zonder aanwijzer of onder reduced motion staat het beeld gewoon scherp.

coverflow-carousel

FC-0066carouselblockv1.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.

flip-gallery

FC-0170flip-galleryblockv1.0.0laag 2

Stapel kaarten die openwaaiert tot een groot beeld en een rail van miniaturen: tik op de stapel en de kaarten vliegen naar hun plek; tik op een miniatuur en die ruilt met het grote beeld — dezelfde elementen, verplaatst, nooit opnieuw gemount. Links titel, meta, tekst en een bijschrift per kaart; teller '01 / 06'. Smal wordt het een gestapelde kolom. Escape sluit, pijltjes bladeren. Componeert motion en use-press.

hover-expand-gallery

FC-0062image-expandprimitivev1.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

FC-0106hover-preview-linkprimitivev1.0.0

Woorden in een lopende tekst die bij hover een zwevend kaartje met beeld, titel en subregel boven de aanwijzer tonen; het kaartje volgt de muis en blijft in het venster. HoverPreview is de context met de kaart, HoverPreviewLink het woord; focus opent de kaart boven het woord. Zusje van link-preview (dat toont een site-preview in een popover).

hover-preview-list

FC-0057list-previewprimitivev1.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.

infinite-slider

FC-0067sliderprimitivev1.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.

link-preview

FC-0038link-previewprimitivev1.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.

marquee

FC-0029marqueeprimitivev1.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.

scroll-mask-reveal

FC-0068scroll-mask-revealblockv1.0.0laag 2

Vastgezet podium waarin een video of foto door een vorm heen zichtbaar is; terwijl je scrolt groeit de vorm tot hij het scherm vult en het beeld zoomt licht in. Hoge sectie met sticky podium — geen pin-spacer, geen GSAP. De vorm is een SVG-data-URI van het project.

video-player

FC-0092video-playerprimitivev1.0.0

Videospeler met eigen bediening: grote afspeelknop in het midden, onderin een glazen balk met tijd, voortgang, ±10 s, geluid met volumeschuif en volledig scherm. De balk verdwijnt na drie seconden spelen en komt terug bij beweging; sneltoetsen zodra de speler focus heeft (spatie/k, m, f, pijltjes).

Achtergronden (4)

Vlakken die achter inhoud leven: shaders, patronen, animaties.

dot-pattern

FC-0096dot-patternprimitivev1.0.0

Stippenraster als achtergrond van een vlak: een SVG die zijn ouder vult met een patroon van kleine cirkels in de tekstkleur op lage dekking. Celmaat, straal, verschuiving en dekking als props; met fade loopt het raster naar de randen uit. Puur decoratief.

noise-gradient

FC-0150noise-backgroundprimitivev1.0.0laag 2

Levend verloop: drie lagen simplex-ruis mengen vier kleuren over een bodemkleur, met een vignet naar de randen, een gloed in het midden en fijne filmkorrel. WebGL, nul dependencies; kleuren zijn CSS-kleuren inclusief tokens (default --muted/--primary/--info/--background). Stopt buiten beeld en onder reduced motion.

shader-background

FC-0071hero-backgroundprimitivev1.0.0laag 2

Traag golvend, zijdeachtig vlak (WebGL, geen dependency) als achtergrond voor een hero of sectie. Het palet komt van het project — als CSS-kleuren of, zonder prop, uit de tokens zelf (--background, --muted, --primary). Optioneel reageert het op de aanwijzer.

sonar-grid

FC-0149sonar-gridprimitivev1.0.0laag 2

Stippenveld dat op tikken antwoordt met uitdijende ringen: waar je tikt vertrekt een golf, om de zoveel seconden vertrekt er vanzelf één, en bij de eerste verf is er al één onderweg. Canvas, nul dependencies, kleur = currentColor (default de merkkleur). Slaapt zonder ringen, pauzeert buiten beeld, stil raster onder reduced motion. Kinderen renderen erbovenop.

Mockups (3)

Apparaatframes: telefoon, laptop, browservenster.

browser-mockup

FC-0091browser-mockupprimitivev1.0.0

Browservenster om een schermontwerp in te zetten: drie stippen, adresbalk met slotje en adres, het beeld of eigen inhoud eronder. Twee gezichten — minimal (stippen en een lege balk) en safari (zijbalk, terug/vooruit, herladen, delen, tabbladen als hairline-iconen). Chroom op --card/--muted, stippen in de statuskleuren of neutraal.

laptop-mockup

FC-0089laptop-mockupprimitivev1.0.0

Laptoplijst om een schermontwerp in te zetten — één model: slanke laptop met 16:10-scherm, camera-uitsparing, dunne voet met scharnier en vingerinkeping. Schaal, klep open of dicht (0–1, scharniert in 3D), veilige rand onder de uitsparing. Behuizing standaard --foreground, scherm --background; nul letterlijke kleuren. Zusje van phone-mockup.

phone-mockup

FC-0060device-mockupprimitivev1.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.

Data & lijsten (10)

Tabellen, grafieken, ranglijsten, logboeken en sorteerbare lijsten.

area-chart

FC-0126area-chartprimitivev1.0.0

Vlakgrafiek zonder chartbibliotheek: één of meer reeksen als gevulde vlakken (optioneel gestapeld), hulplijnen met waarden, x-labels, legenda en een tooltip die de dichtstbijzijnde meting volgt (muis en pijltjes). Reekskleuren uit de tokens of uit colors (projectdata); getallen via Intl in de documenttaal.

audit-log

FC-0058audit-logblockv1.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.

data-table

FC-0128data-tableprimitivev1.0.0

Gegevenstabel zonder tabelbibliotheek: kolommen met een eigen cel-renderer, sorteren door op de kop te tikken (oplopend → aflopend → uit; tekst via localeCompare, getallen numeriek), optioneel een vinkjeskolom voor selectie (met alles/deels) en optioneel een greep waarmee je rijen versleept of met pijltjes verplaatst (aangekondigd via aria-live). Het project levert rijen en kolommen en krijgt sortering, selectie en volgorde terug.

dot-globe

FC-0085globeprimitivev1.0.0laag 2

Een draaiende wereldbol van stippen op een 2D-canvas met aanklikbare markeringen op lengte/breedte. Slepen draait, loslaten rolt uit. Geen three.js, geen textuur: standaard gelijkmatige stippen, met een land-masker van het project een aarde. Kleuren uit de tokens.

import-patchbay

FC-0168import-mapperblockv1.0.0

Kolom-koppelaar voor bestandsimports als een patchbay: één jack per kolom in het bestand, één per veld in je schema, een kabel ertussen. 'Automatisch koppelen' leest voorbeeldwaarden én kopregels (een kolom 'col_7' vol datums vindt 'Ingeschreven'); onzekere koppelingen hangen gestreept tot iemand ze bevestigt. Slepen, tikken of toetsenbord. Componeert button.

leaderboard

FC-0114leaderboardblockv1.0.0

Klassement: kop met periode en een keuze uit rondes, een podium voor de top drie (winnaar in het midden, het hoogst), en een lijst met rang, portret of initialen, naam, subregel en score — de eigen rij uitgelicht, met paginering. Getallen en datums in de taal van het document. Componeert select en button.

reorder-list

FC-0015reorderprimitivev1.0.0

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

stacked-list

FC-0056stacked-listblockv1.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.

tier-list

FC-0087tier-listblockv1.0.0laag 2

Een rangschikbord: rijen met tegels die je erin sleept, herordent en terug naar de bak legt; rijen hernoemen, toevoegen en verwijderen; de bak vergroot tegels rond de muis als een dock. Eigen pointer-sleep met spookvak, toetsenbord met pijltjes. Rijkleuren van het project.

widget-grid

FC-0167widget-gridblockv1.0.0laag 2

Raster van widgets dat je herschikt door te slepen: volgorde + maat per widget (klein, breed, hoog, groot), een exacte tegelaar maakt er bij elk kolomaantal een gatloze rechthoek van, framer animeert elke verandering. Muis/pen slepen direct, touch via lang indrukken, toetsenbord met Alt + pijltjes. Composeert motion.

Voortgang & tijdlijn (12)

Waar sta ik: voortgang, stappen, tijdlijnen, tracking, lege staat.

empty-state

FC-0011empty-stateblockv1.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.

folder-stack

FC-0010folder-illustrationprimitivev1.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.

order-tracking

FC-0116order-trackingprimitivev1.0.0

Status van een bestelling als verticale lijst: per stap een vinkje in een cirkel (gedaan) of een lege cirkel, naam en tijdstip, verbonden door een dunne lijn die tot de laatste voltooide stap in de merkkleur staat. Zonder stappen een korte melding. De kleinste vorm van een tijdlijn.

package-tracker

FC-0115package-trackerblockv1.0.0laag 2

Pakketkaart: knop naar de volledige tracking, een beeldvlak met lopende-band-arcering en het pakket erop, bestemming met vlag, de status groot, pakketnummer met datum en een QR-code (slot). Alles komt bij het laden één voor één omhoog. Componeert button.

progress-bar

FC-0018progressprimitivev1.0.0

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

progress-ring

FC-0119progress-ringprimitivev1.0.0

Voortgang als ring (volledige cirkel) of als boog (ProgressArc: van begin- naar eindhoek, bv. een halve meter) met inhoud in het midden; de vulling glijdt op de default-token naar de nieuwe waarde. Zusje van progress-bar (FC-0018).

reading-progress

FC-0061reading-progressprimitivev1.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.

step-indicator

FC-0118step-indicatorprimitivev1.0.0

Stappenaanduiding voor een wizard of formulier in delen: genummerde rondjes verbonden door een lijn, horizontaal of verticaal, met per stap titel en toelichting. Voltooid = vinkje, huidig = gevuld, rest gedempt; tikken meldt onStepChange. Zusje van task-steps (FC-0013), dat een statuslijst is.

step-timeline

FC-0113step-timelineprimitivev1.0.0

Verticale tijdlijn van stappen uit losse delen: de lijst (tekst links, rechts of aan beide kanten), item, kop, stip (leeg, huidig, klaar, fout of eigen icoon), lijn (grijs of klaar) en inhoud — een project bouwt elke stap precies zoals hij wil. Zusje van timeline (FC-0032), dat een kant-en-klare lijst is.

task-steps

FC-0013task-progressprimitivev1.0.0

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

timeline

FC-0032timelineprimitivev1.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.

trace-timeline

FC-0084trace-timelineprimitivev1.0.0

Een run op een tijdas die je kunt scrubben: sleep de afspeelkop en de balken vullen zich, statussen gaan van wachtend naar bezig naar klaar, tellers lopen op. Geneste stappen springen in, parallelle overlappen, herhalingen dragen ×n. Eén afspeeltijd drijft alles via CSS-variabelen; geen chartbibliotheek.

Meldingen (4)

Toasts, meldingscentra en feedback-balken.

feedback-bar

FC-0125feedback-barprimitivev1.0.0

Compacte balk om een antwoord te beoordelen: icoon en vraag, duim omhoog en omlaag (de keuze blijft gemarkeerd) en een sluitknop achter een scheidingslijn. Meldt onHelpful/onNotHelpful/onClose — het project bewaart.

notification-feed

FC-0133notification-feedblockv1.0.0

Meldingen als kaart: kop met titel en knoppen (alles gelezen, instellingen), tabbladen met tellers die de lijst filteren, en per melding een portret, wie-deed-wat-waar, tijdstip en hoe lang geleden, een ongelezen-stip, optioneel een citaat, een bestand met downloadknop of accepteren/afwijzen. Leeg: belletje met tekst. Componeert tabs en button; zusje van notification-popover (dat is de bel met paneel, dit de volle lijst).

notification-popover

FC-0054notificationsblockv1.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.

toast

FC-0122toastprimitivev1.0.0laag 2

Korte meldingen rechtsonder, gestapeld: de nieuwste vooraan, de oudere iets kleiner erachter; kom je erop, dan waaiert de stapel open en pauzeren de timers. Vier soorten, actie met knop, ongedaan-maken, sluiten. useToasts() geeft de functies; <Toaster /> staat één keer in de app (of het eerste gebruik zet hem zelf in de body).

Dialogen & panelen (3)

Popovers, sheets en keuzedialogen.

popover

FC-0007popupprimitivev1.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.

sheet

FC-0008sheetprimitivev1.0.0

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

source-picker

FC-0123source-pickerblockv1.0.0

Kaart (of dialooginhoud) om iets te maken uit een bron: kop met icoon, titel, toelichting en sluitknop; drie tabbladen — bestand uploaden, link plakken (met hint-chips en voorvertoning) of een bestaand item kiezen (zoekveld + lijst met status); een raster instellingen (selects); een voet met tweede actie en hoofdknop. Meldt onSubmit met bron én instellingen. Componeert tabs, file-dropzone, field, search-field, select en button.

Chat & berichten (3)

Gesprekken, berichtenvensters en spraakbubbels.

chat-layout

FC-0059chatblockv1.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.

conversation

FC-0127conversationblockv1.0.0

Gesprek als kaart: kop met portret, naam en status (online, niet storen, offline) en een gespreksmenu; daaronder de berichten als bellen — eigen rechts op --primary, de ander links op --muted — met tijd en op hover/focus een menu per bericht (beantwoorden, kopiëren, verwijderen, melden). Alle acties zijn callbacks. Componeert popover en button; zusje van chat-layout.

voice-bubble

FC-0093voice-messageprimitivev1.0.0

Spraakbericht als chatbel: ronde afspeelknop, een golfvorm van streepjes die vollopen terwijl het speelt, en de resterende tijd. Tik of sleep op de golf om te zoeken, pijltjes verspringen 5 s. Eigen bel op --primary, ontvangen bel op --card.

Account & toegang (5)

Inloggen, accountmenu, delen, betaalmethoden, toegangslijsten.

account-menu

FC-0052account-menublockv1.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.

payment-methods

FC-0080payment-methodsblockv1.0.0

De bewaarde betaalmethoden van een klant: kaarten met merk, laatste vier cijfers en vervaldatum, één als standaard, per kaart verwijderen, onderaan toevoegen, en een lege staat als er niets is. Receptuur: empty-state + button + usePress; de betaalprovider is van het project.

people-picker

FC-0135people-pickerblockv1.0.0

Kaart om mensen toe te voegen en hun rol te beheren: e-mailveld met rolkeuze en plusknop (Enter werkt ook, ongeldig adres geeft een veldfout), een hairline, en daaronder de mensen met portret of initialen, naam, adres en per persoon een select met de rollen plus Verwijderen; de eigenaar krijgt alleen een label. Toevoegen, rol wisselen en verwijderen zijn callbacks. Kleine zus van share-dialog. Componeert field, select en button.

share-dialog

FC-0086share-accessblockv1.0.0

Mensen toegang geven tot een bestand of project: adressen die als chips vormen terwijl je typt, per persoon een rol, uitnodigingen intrekken, de link wisselen tussen alleen-genodigden en iedereen, kopieerknop en een korte bevestiging. Receptuur: select + button + usePress.

sign-in

FC-0044sign-inblockv1.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.

Gedrag & motion (4)

Hooks en gedragslagen zonder eigen uiterlijk: press, toggle, async, motion-tokens.

motion

FC-0006motionprimitivev1.0.0

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

use-async-action

FC-0016async-actionprimitivev1.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-0009pressprimitivev1.0.0

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

use-toggle

FC-0041toggle-stateprimitivev1.0.0

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

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 (met categorie: waar het op een pagina hoort) + live demo erbij, npm run verify moet groen zijn — en de nieuwe entry verschijnt vanzelf op deze pagina, in zijn categorie, met preview en skin-wisselaar.

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