Arlan's Vault
18 web UI effects, each with a one-line spec, a live demo, and a copyable prompt
Tier B · UsefulGalleryPrompt Packarlan.me
A running collection of visual and motion effects kept by Arlan Marat, a design engineer at Human Delta. Each entry is a single effect — kinetic typography, chromatic glow, Apple's squircle corners, Dia Browser's gradient, the Amo hover button, Midjourney's ASCII treatment — presented as a live client-rendered demo, a one-sentence description of the mechanism, and a "Copy prompt" button that hands you the prompt to recreate it. Everything is MIT and explicitly free to copy. It is a reference for effect ideas, not a component library.
For an agent
Reach for this when a brief asks for a specific named effect and you need the mechanism, not a library — the one-line descriptions ('a letter is cut into a grid of tiles, each tile slips on its own wave') are precise enough to implement from directly. The entry pages render their demos in client-side JS, so a plain fetch returns only the title and that one sentence; the prompt text sits behind a Copy button and will not come back from a scrape. Pair it with a motion library like Motion or GSAP for the actual build, and expect to write the CSS yourself.
Why it is here. It documents the specific effects that circulate in 2026 product design — Dia's gradient, Amo's hover button, Apple's corner curvature — with enough mechanical detail to rebuild rather than merely admire.
Facts
- License
- MIT
- Pricing
- Free, Open source
- Framework
- Not applicable
- Styling
- Not applicable
- Distribution
- Browse-only gallery or archive, Copy-paste snippet
- Platform
- Web
- Content type
- Prompts, Images / textures / backgrounds
- Agent readiness
- Ships a ready LLM prompt, Client-rendered shell
- Accessibility
- Not applicable
- Maturity
- Actively maintained
Components it ships
4Notable for
- one-line mechanism descriptions
- copy-prompt per effect
- MIT, free to copy
- tracks effects from Dia, Amo, Apple, Midjourney
- 18 entries, June to August 2026
Provenance
Verified 2026-08-15. HTTP 200. https://www.arlan.me/vault, https://www.arlan.me/vault/kinetic-typography, https://www.arlan.me (raw HTML inspected for the entry URL list)
Also in Inspiration Galleries
6- A1 · A web design gallery with an MCP server that returns clean JSON, including design tokens measured from the rendered page
- Annual Report Archive · 3,002 corporate annual-report covers from 1945 to 2023, searchable by design vibe over an open MCP server that needs no key
- Mobbin · Searchable library of real mobile and web app screens, organized into user flows
- Refero · Searchable library of real product screens, user flows and design systems, with an MCP server
- Type Foundry Directory · Filterable index of ~394 type foundries and their font licensing terms
- 60fps · 2,038 iOS interaction shots broken into storyboards, with an MCP that hands an agent the real timing