Skip to content

Website v2: holo card deck and the real motion timeline - #15

Merged
srivtx merged 3 commits into
websitefrom
website-v2
Oct 22, 2026
Merged

srivtx merged 3 commits into
websitefrom
website-v2

Conversation

@srivtx

@srivtx srivtx commented Oct 21, 2026

Copy link
Copy Markdown
Owner

A second take on the site's two plainest sections, to compare against srivtx/morphotype#14. This PR targets the website branch, so the diff shows only what changed. The hero, features, downloads and footer are unchanged.

The material deck replaces the five fanned video cards.

  • Ten collectible cards, one per animated showcase. Each shows its real material, its defining settings as pixel meters, its palette, length and layer count, plus a one-line description.
  • Held as a hand: neighbours part to lift the hovered card. It tilts toward the pointer under a sparkle foil and glare, and plays its loop.
  • Click a card and it flies into an inspector, where it turns over. The back shows the card's real timeline rows, a key of track kinds, and the layer, track and frame counts.
  • Controls: ←/→ change card, F turns it over, Esc closes, and you can swipe on touch screens. On phones the hand is a swipeable row, and the middle card plays.

The motion timeline replaces the carousel.

  • The app's track layout: each showcase plays above its rows exactly as the motion editor lays them out. That means entrances with path steps, loops with their periods, keyframed settings and materials that flow by themselves.
  • Playhead: a frame readout, clips that light up while they play, and drag-anywhere scrubbing.
  • Switching: picking a showcase pixelates out of one loop and into the next. Left alone, it moves on after two loops.

The data is real. website/showcases.js was generated by loading each template in the app and running the motion editor's own rowsOf, plus the effect definitions for each setting's label and range. Melting and Arcade, whose look comes from a modifier, use the modifier values from the template source.

Checked in the browser on desktop and a 375 px phone, in light and dark themes, with no console errors:

  • the inspector opens and turns over;
  • switching showcases and scrubbing work;
  • the pixel transition draws.

🤖 Generated with Claude Code

The two plainest sections are rebuilt around real data from the app.

- The material deck: ten collectible cards, one per animated showcase,
  held as a fanned hand. Each shows its real material, the settings that
  define it as pixel meters, its palette, length and layer count. Cards
  part to lift the hovered one, tilt toward the pointer under a sparkle
  foil and glare, and play their loop. Clicking flies a card into an
  inspector, where it turns over to show its real timeline rows, a key
  of track kinds and the scene's facts; arrows, Esc, F and swipes work.
- The motion timeline replaces the carousel: each showcase plays above
  its rows exactly as the motion editor lays them out (entrances with
  path steps, loops with their periods, keyframed settings, materials
  that flow), with a playhead, live clips, frame readout and scrubbing.
  Switching showcases pixelates out of one loop and into the next.
- showcases.js is generated from the templates with the app's own
  tracks code (rowsOf) and effect definitions, so every number on a
  card is what the template uses.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@vercel

vercel Bot commented Oct 21, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
morphotype Ready Ready Preview Oct 21, 2026 7:01pm UTC

srivtx and others added 2 commits October 22, 2026 00:31
The deck and the timeline now show the new showcases from #16 in place of
Neon sign, Sticker pack, Liquid chrome, Keyboard, Melting, Arcade, Plush
weather and Print club: Shape shifter (an animated font morph), Glass
lens, Crystal, Frosted 404, Thermal wings, Glow glass, Puffy and Aura,
with Holo card and Pop 3D kept. Loops were recorded through the app's own
per-frame geometry path, card swatches are sampled from each scene's
rendered frame, and the timeline rows come from the motion editor.

The Pixel office still is re-rendered from its rebuilt template, and
the nav links hide below 820 px instead of wrapping.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@srivtx
srivtx marked this pull request as ready for review October 22, 2026 12:03
@srivtx
srivtx merged commit 1e89ef9 into website Oct 22, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant