Maak kennis met Hana

Een nieuw canvas voor interactief design.

Open Hana

Hana biedt een nieuwe aanpak voor interactief design. Hana is vanaf nul gebouwd met prestaties als kern: een realtime canvas om interactieve 2D-ervaringen te ontwerpen en te animeren, van verfijnde interfaces tot dynamische visuals, en ze naar productie te brengen.

Met Hana maak je rijke content op basis van states die zich gedraagt, reageert en zich aanpast op een snel en oneindig canvas.

Hover of tik om te interacteren (ervaring gemaakt met Hana)

Mogelijkheden

Voor Hana bouwden we een nieuw soort render-engine die vectordata razendsnel en in realtime verwerkt. Makers krijgen zo toegang tot het bewerken van moderne vectornetwerken, transities op basis van states en effecten die door de GPU worden versneld, allemaal in een collaboratieve omgeving die native in de browser draait.

Alles wat je in Hana ontwerpt, is standaard klaar voor productie. Of het nu een eenvoudige vorm is of een complexe interactieve ervaring, de engine van Hana is gebouwd voor realtime interacties die je eenvoudig in elke website of app insluit.

Van nauwkeurig vectortekenen tot zachte schaduwen en blurs: Hana combineert kracht en eenvoud op een manier die licht aanvoelt, maar toch grenzeloos is.

Ervaringen gemaakt met Hana

Realtime samenwerken aan design

Frames in Hana kunnen afspeelbare componenten zijn die zelfstandig werken, allemaal in de editor. Dat maakt het maakproces eenvoudiger, want je hebt geen aparte "Animate"-modus nodig. In plaats daarvan interacteer je met je ervaring door hem direct af te spelen in een frame in de editor. Frames kun je ook afzonderlijk exporteren als live URL’s, als afbeeldingen en in de toekomst nog meer.

Deel een link en teamgenoten springen direct in je canvas om het te ervaren en eraan bij te dragen. Elke wijziging verschijnt live. Feedback is direct. Multiplayer als uitgangspunt, en goed gedaan.

Hana gebruikt het systeem voor realtime samenwerking van de 3D-editor van Spline, dat al wordt ondersteund, zodat je team sneller werkt en op één lijn blijft.

Vectornetwerken gemaakt met Hana

Vectornetwerken in realtime

Met vectornetwerken (een concept dat Figma in 2016 introduceerde) verbind je meer dan twee lijnen met één punt, waardoor je makkelijker allerlei vormen maakt.

Hana tilt deze aanpak naar een hoger niveau met het eerste systeem waarmee je vectornetwerken maakt voor een realtime omgeving.

Daarnaast maak je met booleans op meerdere niveaus geavanceerde vormen en vloeiende effecten, zodat je eenvoudig complexe, animeerbare vormen krijgt.

Ervaringen gemaakt met Hana

Interacties en animatie

Gebruik interacties op basis van events om gedrag aan je designs toe te voegen, van hover-states tot toetsenbordinvoer. Animeer transities, bouw flows en experimenteer met beweging direct op het canvas. Zonder van tool te wisselen.

Met Hana worden beweging en interactiviteit onderdeel van het designproces, en geen bijzaak.

Ervaringen gemaakt met Hana

Exporteren en delen voor productie

Net als in de 3D-editor van Spline genereer je in Hana live interactieve links vanuit elk frame. Alles is geoptimaliseerd om in een productieomgeving in te sluiten, zodat je werk er bij livegang net zo goed uitziet als in de editor.

Ervaringen gemaakt met Hana

Het volgende tijdperk van interactiviteit

Dit is een nieuw medium voor interactief denken. Of je nu een product ontwerpt, een UI-interactie uitwerkt of rijke interactieve ervaringen maakt, Hana helpt je je ideeën tot leven te brengen.

Hana is het fundament voor wat er nog komt.

Het is de eerste stap in een bredere visie op wat nu het ecosysteem van Spline is, waarin design in 2D/3D en interactiviteit naadloos samensmelten en live gaan.

We kunnen niet wachten om te zien wat je met Hana maakt!

— Het Spline-team 🌸

Meer info

Meer van de blog