Show HN: Performative-UI – デザインのトロープに基づく React コンポーネントライブラリ

 (vorpus.github.io)
2 ポイント 投稿者 GN⁺ 6 일 전 | 1件のコメント | WhatsAppで共有
  • AIスタートアップ向けのAI-native Reactコンポーネント集で、27個のコンポーネントとMITライセンスを提供
  • 一般公開中で、インストールコマンドは npm install performative-ui
  • 構成は Atoms、Primitives、Banners、Heroes、Backgrounds、Surfaces、Conversation、Social Proof、Pricing & Conversion に分類
  • Prompt、TokenStream、LogoMarquee、PricingCard、WaitlistForm などのコンポーネントが、プロンプト入力欄、トークンストリーム、ロゴ、価格カード、ウェイトリストフォームを担当
  • 各コンポーネント説明は、資金調達、モデル名、ロゴ、数字、コンバージョンUIなど、AIスタートアップのランディングページで使われるデザイン上のシグナルを短い文句で表現

概要

  • Performative-UI は一般公開中のAIスタートアップ向け AI-native Reactコンポーネント集で、27個のコンポーネントとMITライセンスを提供
  • インストールコマンドは npm install performative-ui
  • コンポーネントの目的は、資金調達ラウンドがどれだけオーバーサブスクライブされたかを示すこと

コンポーネント一覧

  • Atoms

    • Sparkle: どんな名詞にも ✦ を付けて、2倍速くローンチできるようにする要素
    • GradientText: イタリックだけではユニコーン級らしさが足りないときのグラデーションテキスト
    • StatusDot: そうでないときでも、いつでも緑色のステータスドット

  • Primitives

    • Button: クリックしたくなるように動くボタン
    • EyebrowPill: もう言うことがないときにモデル名を入れる場所
    • Prompt: 製品機能を説明する代わりに、すべてのAIビルダーが配置する textarea

  • Banners

    • StickyBanner: ユーティリティに見せかけた資金調達ニュース

  • Heroes

    • Rotator: 「everything」と言うだけでは十分に野心的でないときの回転コピー
    • WordRoll: 訪問者が入力を待たなくても Rotator の守備範囲の広さを見せつける演出
    • PromptHero: 価値提案をテキスト入力欄に置き換えたヒーロー
    • AsciiHero: ハッカー向け、しかるべきニュースレターを購読している人たちが作った ASCII ヒーロー

  • Backgrounds

    • Aurora: 3つの blob で1世代を定義する背景
    • NodeGraphBackground: 概念上はニューラルネットワークであるノードグラフ背景
    • FloatingSparkles: 「魔法は勝手にはローンチされない」という漂うきらめき

  • Surfaces

    • GlassCard: Backdrop-filter: ambition
    • MockIDE: 本物のコードは後から来る、これは予告編

  • Conversation

    • ChatBubble: 吹き出しの中にあれば必ず真実になるチャットバブル
    • TokenStream: Server-sent events (SSE) は 2008 年の HTML5 仕様に追加されたのに、2025 年まで使われなかったというトークンストリーム
    • ChatFAB: もう逃げ場はないというチャットFAB

  • Social Proof

    • LogoMarquee: あなたが聞いたことのあるあらゆる相手が信頼していることにするロゴマーキー、署名していない相手まで含む
    • LogoRow: ロゴが6つしかないときに使う静的ロゴ
    • StatCounter: 上がっていく数字のほうがそうでない数字より良いというカウンター
    • CommunityBadge: Stars は新しい MAU だというコミュニティバッジ

  • Pricing & Conversion

    • PricingCard: 真ん中のカードが光っているので、それに合わせて選ばせる価格カード
    • BeforeAfter: 左は混沌、右は私たち
    • WaitlistForm: 自ら作り出した需要を受け止めるウェイトリストフォーム
    • Popover: 同意ではなくコンバージョンのために作られたポップオーバー

関連記事

1件のコメント

 
GN⁺ 6 일 전
Hacker Newsのコメント

  • シンプルで要点だけのサイトを見せると、こういう見せつけるUI要素がないせいで真面目に受け取ってもらえない、と複数のプロジェクトで実際に言われたことがある
    YouTuberの視聴者がずっとチャンネル登録を求めるのをうっとうしいと文句を言うのと似ている。そうするのは、統計的に効果があるからだ

    • 結局は第一印象の問題だ。Webサイトのデザインは会社の第一印象であり、デザインが整っていれば製品も整っていて堅牢だと信じてもらえる
      高い物ほど品質が高く、全体的にも優れていると思われがちなのと似ている。このサイトではヒーロー領域のASCIIアニメーションがいちばん良いコンポーネントなのに、そのコンポーネント自体はコピーできない。あの見事なASCIIヒーローのおかげで第一印象が良くなって、すべてのコンポーネントを見て回る気になった
    • 主催しているカンファレンスでSubstackサイトを使っているが、ポップアップやあちこちにある購読ボタンは以前は目障りだと思っていたものの、実際には効果がある
      トラフィックの少ないサイトなのに、購読者が0人からほぼ1,000人まで増え、人々にリーチする最良の方法になった
      https://carolina.codes
    • ここで言いたいのは、スタートアップのWebサイトが派手であってはいけないという意味ではないようだ。ただ、みんなが同じ見た目である必要はない、という話だと思う
    • クリックベイトのサムネイルも同じだ。人は嫌うが、実際にはクリックベイトでないサムネイルはあまり押されない
    • YouTubeの収益化ガイドラインもそれを求めている

  • 面白いのは、ここに出てくる手法が、かつては上級フロントエンド開発者やパブリッシャーにしかできないと思われていたものだという点だ
    以前は実力の象徴だったものが今では風刺の対象になっているのを見ると、私たちが言う上級レベルというのは結局「他人にはできないこと」から来ているのだと感じる。個人的にはASCIIアートアニメーションをどう実装するか考えたことすらなかった

    • 複雑なグラフィックデザインを実際に実装できることに誇りを感じていた立場としては、ちょっとしたアイデンティティ危機が生じたのも事実だ
      でも結局、AIがまだ苦手なものを探すようになるだけで、それが今でも誰でも生成できるものと自分の仕事を区別し続けてくれると思う。カメラの登場後に写実主義から印象派へ移っていった流れに似ている気がする
    • 昔は仕事の証明のように機能していたが、その後に安価なプリント基板が市場にあふれて、その作業量が取るに足らないものになったのと似ている
    • 「できない」というより、むしろ創造性に近い話だと思う

  • これが面白いうえに、本当によくできているのが良い
    正直、いくつかのコンポーネントは実際に使いたいし、とくにASCIIアートが素晴らしい

    • 私も同じことを言おうとしていた。ここにあるもののうちいくつかは、間違いなく自分でもやったことがある
      リストにないものも何十個も思い浮かぶが、みんなが何のことかわかるものをここまでうまく整理してあるのを見ると新鮮だ。作者に拍手を送りたい

  • 最も極端な美徳アピールは、完全にブラウザのデフォルトのままにして、スタイルをまったく入れないことだ
    シリーズAで10億ドルを調達したのに、小指をShiftキーまで伸ばすのが面倒だから全部小文字で書くようなものだ

    • https://www.berkshirehathaway.com/
    • コメントを書くときに正しい大文字小文字、カンマ、文法、スペルをほとんど気にしなくなったが、主な理由は自分がLLMではないというシグナルを出すためだ
    • 「美徳アピール」よりカウンターシグナリングのほうが正しい言い方かもしれない: https://en.wikipedia.org/wiki/Countersignaling
      「カウンターシグナリングとは、ある属性を最も多く持つ行為者が、同じ属性を中程度に持つ個人よりも、その属性を証明するための投資を少なくする行動」を意味する
    • 美徳アピールというより、単に元祖なのでは？
      https://www.berkshirehathaway.com/
    • Netscapeがいちばんよく知っている

  • 実質的にはパロディライブラリなのに、どれもかなりプロフェッショナルに見える

    • 後でアイデアやインスピレーションを得るために、間違いなくブックマークしておくつもりだ。恥ずかしいと思っても構わない
    • だとすると、数年後には「プロフェッショナル」という見た目はかなり違って見える気がする
    • 実際の製品にこれを使う会社が出てくる確率はどれくらいだろう？
    • ある手法をからかうからといって、その手法が精巧でないという意味にはならない
      何かを冗談として扱うには、たいていそれを相互に結び付いた形で理解している必要がある
    • むしろ、あらゆる雑なスタートアップページがどれほど予測可能で似通っているかを示しているのかもしれない

  • うっとうしいポップオーバーが、自分のドキュメントをスクロールしたときにどうして自動で出てこないのか理解できない
    IntersectionObserverがもっと必要だ。コンポーネントのプロパティ名がselfArmTriggerみたいならボーナスポイントもあげられる

  • 「TokenStream – サーバー送信イベント(SSE)は2008年にHTML5仕様へ追加されたが、2025年まで使われなかった。」
    1997年にチャンク転送エンコーディングが出てきたのを覚えている。当時からすでに、今日人々がLLMで見ているように、テキストのバイト列やHTML断片を簡単かつ即座にストリーミングできた
    1997年にこれでWebベースのTelnetクライアントを作り、その後はWeb向けのテキストMOO/チャットも作った。どちらもframesetを使い、送信用の行は画面下部に置き、受信する行はサーバー側で何か起こるたびにサーバーが送り、新しい行が入るたびにクライアントをスクロールさせていた
    それ以前にも悪用できる手法はいくつかあったが、信頼性は低かった。それでも、本当に誰も使わなかった技術の話ならいくらでもできる

    • COMETは時代を大きく先取りしていた。Sierra Onlineが1995年にWebチャットで使っていて、何年もの間、断トツで最高のWebチャットだった

  • こうしたクリシェ全般は理解しているし、自分がただ年を取っただけかもしれないが、ClaudeがこういうUIを自分より100倍速く出してくるのは、今でもかなり印象的だ
    もしかするとAI以前には、自分はこの程度の品質のUIすら作れなかったからかもしれない (˶ˆᗜˆ˵)

  • 2017/18年のICOブームのとき、トークン販売のマーケティングサイトにはアニメーションするグラフノード背景が必須だった
    https://vorpus.github.io/performativeUI/#/components/node-gr...

  • 使いたい人のためにGitHubリンクを追加した。自分も使うつもりだ
    https://github.com/vorpus/performativeUI

    • ちょっと待って、私のREADMEはまだ十分に見せつけが足りないな。スター数の推移を表示するチャートを追加しないといけない