mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-30 14:58:08 +00:00
zeekay
a9cb4e5c51
components/family/Film is the one player: the still is the first paint, the loop is made only after hydration and only when motion is wanted, and one IntersectionObserver for every film on the page loads a loop just before it shows, plays it on screen and pauses it off. It fades in on `playing`, so the step from still to loop cannot be seen. The bento draws each card's film behind its words with no filter (the art is grey already), a lighter scrim, the lean and a small grow on hover; the line keeps to the left of the card and Enso runs its square master below 1024px. /enso, /kai, /zen and the six creative models open on Fold with the film where a page puts its preview, screened onto the dot field and drawn inverted in the light theme; Splash is that Fold with a model's words. The route Enso takes and the decision Kai forms move to the band under it. e2e/gates/films.spec.ts holds the files, their weight, the loops playing and pausing, the phone's square Enso, reduced motion and each page's one heading beside its film.
64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
import { ArrowRight } from 'lucide-react'
|
|
import { T } from '@hanzo/i18n/react'
|
|
import { Action } from '@hanzo/ui/marketing'
|
|
import { Fold } from '@/components/marketing/fold'
|
|
import { Film } from './Film'
|
|
|
|
/**
|
|
* A model's first screen, as its card on the landing draws it (the owner's
|
|
* mockup, 2026-10-30): the words on the left — what kind of model it is, its
|
|
* name as the release says it ("Zen 6", "Koma 1"), its line, a sentence, two
|
|
* ways on — and its film on the right, the one concept the card plays, grey on
|
|
* true black (components/family/Film). It is the first screen every page has
|
|
* (components/marketing/fold); the film stands where another page puts its
|
|
* preview, under the words on a phone. The creative models
|
|
* (components/creative/CreativeLanding) and Zen open this way; /enso and /kai
|
|
* hand their own words to the same Fold with their film beside them.
|
|
*/
|
|
type Way = { label: string; href: string }
|
|
|
|
export function Splash({
|
|
slug,
|
|
kind,
|
|
icon,
|
|
name,
|
|
line,
|
|
lede,
|
|
primary,
|
|
secondary,
|
|
}: {
|
|
slug: string
|
|
/** What kind of model it is, a word or two: "Video", "Open models". */
|
|
kind: string
|
|
icon?: ReactNode
|
|
/** The release's name, the page's heading. */
|
|
name: string
|
|
line: string
|
|
lede: string
|
|
primary: Way
|
|
secondary: Way
|
|
}) {
|
|
return (
|
|
<Fold
|
|
label={kind}
|
|
mark={icon}
|
|
title={name}
|
|
claim={<T>{line}</T>}
|
|
lede={<T>{lede}</T>}
|
|
actions={
|
|
<>
|
|
<Action href={primary.href} fill>
|
|
<T>{primary.label}</T>
|
|
<ArrowRight width={16} height={16} data-i18n-mirror />
|
|
</Action>
|
|
<Action href={secondary.href}>
|
|
<T>{secondary.label}</T>
|
|
</Action>
|
|
</>
|
|
}
|
|
preview={<Film slug={slug} hero />}
|
|
/>
|
|
)
|
|
}
|