Moduli interattivi. Libreria portabile. Creatività misurabile.
Cyanoflux offre componenti UI interattivi e sistemi generativi progettati per designer: canvas leggero, CSS avanzato, semantica e accessibilità AA. Ogni modulo è pensato per integrazione rapida senza lock-in e per campagne con KPI chiari.
Catalogo moduli
Testo reattivo, overlay canvas e controlli editoriali. Ottimo per campagne e pagine di lancio.
- Animazioni entro 16ms/frame
- Fallback statico automatico
- Hook per tracking
Layout fluido con filtri e keylines. Perfetta per showcase, moodboard e portfolio.
- Lazy load intelligente
- Drag & keyboard nav
- Schema markup
Motori di pattern con input controllati dal team design: ripetibilità estetica garantita.
- API design-tokens
- Seed deterministico
- Accessibilità AA
Transizioni sobrie e checkpoint semantici. Ideale per storytelling e presentazioni.
- Semantica & landmarks
- Motion budget documentato
- Eventi di progresso
Stati hover/focus, pulsanti e card con feedback chiari e misurabili.
- Preferenze “reduce-motion”
- Token tempo/easing
- Playbook QA
Visual leggeri per metriche e KPI. Nessuna dipendenza pesante.
- Canvas 2D only
- Size < 12KB Gz
- Colori accessibili
Stack e integrazione
- Vanilla JS/TS, CSS moderno, Canvas; nessun lock-in di framework.
- API chiare: props, eventi e slot per contenuti.
- Semantica ARIA, focus ring coerenti, tastiera by default.
- Documentazione e esempi pronti da copiare.
Rispetto rigoroso delle linee guida CWV e preferenze di riduzione movimento.
Deliverable
- Bundle ESM + tipizzazioni d.ts
- Guida d’integrazione e QA checklist
- Report performance & accessibilità
- Roadmap di manutenzione
Esempi di resa
Hero con testo reattivo e accenti canvas.
Galleria con filtri e keylines.
Scroller narrativo con checkpoint.
Vuoi integrare la libreria Cyanoflux?
Ti inviamo i moduli più adatti e un piano di rollout con KPI e check QA.