repository·main·Indexed 21 days ago
https://github.com/vorpus/performativeuiA library of AI-native React components for React 19 and TypeScript, designed to signal the level of oversubscription in a funding round. The project includes research on performative AI UI design systems, covering patterns for typewriter hero animations, logo walls, and decorative backgrounds used by AI companies.
The 00_source_companies.md file serves as a master catalog of AI companies used for performative AI UI design-system research. It categorizes companies into functional groups (e.g., Frontier labs, Coding tools, Vertical SaaS, etc.) to provide canonical examples of the "performative AI UI" aesthetic.
Developers or design agents can use this roster to identify industry-standard UI patterns across different sectors like:
When performing UI research or analysis using this repository's source list, companies are classified using the following standard categories:
The Single-Letter Morph is a hero effect where a static sentence contains one specific character that cycles through different Unicode glyphs, character-set variants (like fraktur or script), or glitch variants. This is often used by generative AI brands to signal a 'liquid' or generative brand identity.
Example Shape: tr𝒶nsform where the a cycles through variants.
When designing a logo wall, choose a visual treatment based on the desired brand signal:
@keyframes scroll with translate3d and duplicating the logo strip 2-3x for a seamless loop. Common libraries include react-fast-marquee or Framer Motion's <motion.div>.To signal AI capabilities visually, use specific iconography patterns:
✨ / Four-Pointed Star): Place a 16px four-pointed star to the left of any verb meaning 'generate' (e.g., 'Generate', 'Ask AI'). Use white-on-gradient or gradient-on-white color schemes. Avoid red, as it implies an error.Use these background patterns to establish an AI aesthetic:
#D4A574-ish) to signal safety and alignment.#10A37F on interactive elements like send buttons to imply lineage to ChatGPT.To match the current 'AI startup' or 'v0' aesthetic, use the following color palette. This palette is characterized by dark backgrounds and high-saturation indigo/violet accents:
#0a0a0a to #1a1a2e (near-black with a blue shift).#6366f1 $\rightarrow$ Violet #8b5cf6 (Tailwind-style).#06b6d4 (for data signals) or Magenta #ec4899 (for creative AI signals).#84cc16.#d97757.A high-performance pattern for creating 'flashlight' or 'glow' effects (like the Stripe card grid) without triggering JS re-renders or animation loops.
pointermove listener to the container.--x and --y (using pixels or percentages), on the target element.radial-gradient for the background or a mask to reveal content.This approach is extremely lightweight (~10 lines of code) and is used by Stripe and Vercel.
/* Example CSS usage */
.card {
background: radial-gradient(circle at var(--x) var(--y), rgba(255,255,255,0.2), transparent);
}When building multiplayer environments (the presence pattern), simply setting a cursor's position based on the latest server message results in jerky, 'teleporting' motion.
To achieve smooth, continuous motion (as seen in Figma or tldraw), use interpolation. Instead of jumping to the new coordinates, use a short look-ahead spline or an interpolation library like perfect-cursors to smooth the path between server ticks.
In this pattern, words do not auto-cycle based on a timer. Instead, the rotation is tied to the user's scroll position (often using tools like GSAP pinning). As the user scrolls, the page 'types in' a new noun or use case at specific scroll steps.
Example Shape: A pinned section where each scroll increment triggers a new word in the typewriter sequence.
This guide categorizes common visual patterns used in AI landing page design to signal 'intelligence' or 'complexity'. Use these patterns to decide on a visual direction for your project: