template.mdx

[//]: # (import { ArticleLayout } from '@/components/ArticleLayout')

[//]: # ()
[//]: # ()
[//]: # (export const meta = {)

[//]: # ()
[//]: # (  author: 'Adam Wathan',)

[//]: # ()
[//]: # (  date: '2022-09-02',)

[//]: # ()
[//]: # (  title: 'Introducing Animaginary: High performance web animation',)

[//]: # ()
[//]: # (  description:)

[//]: # ()
[//]: # (    'When you’re building a website for a company as ambitious as Planetaria, you need to make an impression. I wanted people to visit our website and see animations that looked more realistic than reality itself.',)

[//]: # ()
[//]: # (})

[//]: # ()
[//]: # ()
[//]: # (export default &#40;props&#41; => <ArticleLayout meta={meta} {...props} />)

[//]: # ()
[//]: # ()
[//]: # (When you’re building a website for a company as ambitious as Planetaria, you need to make an impression. I wanted people to visit our website and see animations that looked more realistic than reality itself.)

[//]: # ()
[//]: # ()
[//]: # (To make this possible, we needed to squeeze every drop of performance out of the browser possible. And so Animaginary was born.)

[//]: # ()
[//]: # ()
[//]: # (```js)

[//]: # ()
[//]: # (import { animate } from '@planetaria/animaginary')

[//]: # ()
[//]: # ()
[//]: # (export function MyComponent&#40;{ open, children }&#41; {)

[//]: # ()
[//]: # (  return &#40;)

[//]: # ()
[//]: # (    <animate.div)

[//]: # ()
[//]: # (      in={open})

[//]: # ()
[//]: # (      animateFrom="opacity-0 scale-95")

[//]: # ()
[//]: # (      animateTo="opacity-100 scale-100")

[//]: # ()
[//]: # (      duration={350})

[//]: # ()
[//]: # (    >)

[//]: # ()
[//]: # (      {children})

[//]: # ()
[//]: # (    </animate.div>)

[//]: # ()
[//]: # (  &#41;)

[//]: # ()
[//]: # (})

[//]: # ()
[//]: # (```)

[//]: # ()
[//]: # ()
[//]: # (Animaginary is our new web animation library that redefines what you thought was possible on the web. Hand-written in optimized WASM, Animaginary can even animate the `height` property of an element at 60fps.)

[//]: # ()
[//]: # ()
[//]: # (## Sermone fata)

[//]: # ()
[//]: # ()
[//]: # (Lorem markdownum, bracchia in redibam! Terque unda puppi nec, linguae posterior)

[//]: # ()
[//]: # (in utraque respicere candidus Mimasque formae; quae conantem cervice. Parcite)

[//]: # ()
[//]: # (variatus, redolentia adeunt. Tyrioque dies, naufraga sua adit partibus celanda)

[//]: # ()
[//]: # (torquere temptata, erit maneat et ramos, [iam]&#40;#&#41; ait dominari)

[//]: # ()
[//]: # (potitus! Tibi litora matremque fumantia condi radicibus opusque.)

[//]: # ()
[//]: # ()
[//]: # (Deus feram verumque, fecit, ira tamen, terras per alienae victum. Mutantur)

[//]: # ()
[//]: # (levitate quas ubi arcum ripas oculos abest. Adest [commissaque)

[//]: # ()
[//]: # (victae]&#40;#&#41; in gemitus nectareis ire diva)

[//]: # ()
[//]: # (dotibus ora, et findi huic invenit; fatis? Fractaque dare superinposita)

[//]: # ()
[//]: # (nimiumque simulatoremque sanguine, at voce aestibus diu! Quid veterum hausit tu)

[//]: # ()
[//]: # (nil utinam paternos ima, commentaque.)

[//]: # ()
[//]: # ()
[//]: # (```c)

[//]: # ()
[//]: # (exbibyte_wins = gigahertz&#40;3&#41;;)

[//]: # ()
[//]: # (grayscaleUtilityClient = control_uat;)

[//]: # ()
[//]: # (pcmciaHibernate = oop_virus_console&#40;text_mountain&#41;;)

[//]: # ()
[//]: # (if &#40;stateWaisFirewire >= -2&#41; {)

[//]: # ()
[//]: # (    jfs = 647065 / ldapVrml&#40;tutorialRestore, 85&#41;;)

[//]: # ()
[//]: # (    metal_runtime_parse = roomComputingResolution - toolbarUpload +)

[//]: # ()
[//]: # (            ipx_nvram_open;)

[//]: # ()
[//]: # (} else {)

[//]: # ()
[//]: # (    maximizeSidebar *= suffix_url&#40;flatbed + 2, requirements_encoding_node +)

[//]: # ()
[//]: # (            only_qbe_media, minicomputer&#41;;)

[//]: # ()
[//]: # (})

[//]: # ()
[//]: # (```)

[//]: # ()
[//]: # ()
[//]: # (Aere repetiti cognataque natus. Habebat vela solutis saepe munus nondum adhuc)

[//]: # ()
[//]: # (oscula nomina pignora corpus deserat.)

[//]: # ()
[//]: # ()
[//]: # (## Lethaei Pindumve me quae dinumerat Pavor)

[//]: # ()
[//]: # ()
[//]: # (Idem se saxa fata pollentibus geminos; quos pedibus. Est urnis Herses omnes nec)

[//]: # ()
[//]: # (divite: et ille illa furit sim verbis Cyllenius.)

[//]: # ()
[//]: # ()
[//]: # (1. Captus inpleverunt collo)

[//]: # ()
[//]: # (2. Nec nam placebant)

[//]: # ()
[//]: # (3. Siquos vulgus)

[//]: # ()
[//]: # (4. Dictis carissime fugae)

[//]: # ()
[//]: # (5. A tacitos nulla viginti)

[//]: # ()
[//]: # ()
[//]: # (Ungues fistula annoso, ille addit linoque motatque uberior verso)

[//]: # ()
[//]: # ([rubuerunt]&#40;#&#41; confine desuetaque. _Sanguine_ anteit)

[//]: # ()
[//]: # (emerguntque expugnacior est pennas iniqui ecce **haeret** genus: peiora imagine)

[//]: # ()
[//]: # (fossas Cephisos formosa! Refugitque amata [refelli]&#40;#&#41;)

[//]: # ()
[//]: # (supplex. Summa brevis vetuere tenebas, hostes vetantis, suppressit, arreptum)

[//]: # ()
[//]: # (regna. Postquam conpescit iuvenis habet corpus, et erratica, perdere, tot mota)

[//]: # ()
[//]: # (ars talis.)

[//]: # ()
[//]: # ()
[//]: # (```c)

[//]: # ()
[//]: # (digital.webcam_dual_frequency = webmasterMms;)

[//]: # ()
[//]: # (if &#40;5 + language_standalone_google&#41; {)

[//]: # ()
[//]: # (    cc_inbox_layout *= file_character;)

[//]: # ()
[//]: # (    task += p;)

[//]: # ()
[//]: # (    lockUnicode += enterprise_monochrome&#40;tokenFunctionPersonal, keyVirtual,)

[//]: # ()
[//]: # (            adf&#41;;)

[//]: # ()
[//]: # (})

[//]: # ()
[//]: # (windows_binary_esports&#40;87734, array&#40;restoreRomTopology, adRaw&#40;407314&#41;,)

[//]: # ()
[//]: # (        dongleBashThumbnail&#41;, interpreter&#41;;)

[//]: # ()
[//]: # (```)

[//]: # ()
[//]: # ()
[//]: # (Sit volat naturam; motu Cancri. Erat pro simul quae valuit quoque timorem quam)

[//]: # ()
[//]: # (proelia: illo patrio _esse summus_, enim sua serpentibus, Hyleusque. Est coniuge)

[//]: # ()
[//]: # (recuso; refert Coroniden ignotos manat, adfectu.)