mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-29 07:20:43 +00:00
zeekayandHanzo Dev
c9306f0bd2
/enso, /kai and /zen close on rows you can hit: the model cards, the boards, and the papers and HIPs that exist. /benchmarks lists every board in the model file and every paper in the library. /research links the HIP index, the family specifications, and the standards they are written to. Co-authored-by: Hanzo Dev <[email protected]>
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* The packing figure plays once, when it enters, and only if motion is wanted.
|
|
* The painted state is already the packed one, so a frozen frame is the truth.
|
|
*/
|
|
import { useEffect } from 'react'
|
|
import { View } from '@hanzo/ui'
|
|
import { Pack } from './figures'
|
|
|
|
export function Compress() {
|
|
useEffect(() => {
|
|
const root = document.getElementById('zen-pack')
|
|
if (!root) return
|
|
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
|
|
const packs = [...root.querySelectorAll<HTMLElement>('[data-pack]')]
|
|
const io = new IntersectionObserver(
|
|
(entries) => {
|
|
if (!entries.some((e) => e.isIntersecting)) return
|
|
io.disconnect()
|
|
packs.forEach((el, i) => {
|
|
el.animate([{ transform: `scaleX(${1.35 - i * 0.12})` }, { transform: 'scaleX(1)' }], {
|
|
duration: 700,
|
|
easing: 'cubic-bezier(.2,.7,.2,1)',
|
|
fill: 'both',
|
|
})
|
|
})
|
|
},
|
|
{ threshold: 0.45 },
|
|
)
|
|
io.observe(root)
|
|
return () => io.disconnect()
|
|
}, [])
|
|
return (
|
|
<View id="zen-pack" width="100%" overflow="hidden">
|
|
<Pack />
|
|
</View>
|
|
)
|
|
}
|