いま流行りのvercel【v0】の自作アイデア17選✨

2日前にnoteに投稿したものと同じ記事です
https://note.com/arthurlawrence/n/n6ee758eb8d65


最近はやってるっぽいので、今日課金して、適当にいろいろ作ってみたので、作例を紹介します。

爆速でいろいろ作れたので楽しかったです

これから、夏休みとかでいろいろつくってみたいなという人は参考にしてみてください

xの動画が使いたかったので、この記事ではそちらを貼っただけです

それでは 3,2,1 Go

## 1. Enhanced Categorized Cubic Bezier Playground

https://x.com/hiokiryujicom/status/1828759459252093253


cssのcubic bezier curveのplayground! 視覚的にわかりやすく、アニメーションを確認して、cssをcopyできる【応用】なにか網羅的かつ視覚的に確認したいときは、この方式は使えるなにか並べたいときはuse grid autofillと打ち込むと吉


## 2. Circular Piano

https://x.com/hiokiryujicom/status/1828760013416042531


音が実際にならせる楽器！ 見た目も自由に変形 【応用】 自分専用の楽器を作りたいときは、ピアノに限らず使えるかも、ユニークなオリジナルの楽器を作成してみてね 音はtonejsを使って！と言ってあげるとスムーズ

## 3. Pachinko with Params Modal
https://x.com/hiokiryujicom/status/1828760691496694064

ながめているだけで楽しいカラフルな釘付きパチンコ はじめは釘やボールに個性はなかったけど、 add idiosyncrasies to balls(ボールに特徴を足して などと打って個性を調整 2Dの物理エンジンはmatterjsが使いやすい場面も多いのでおすすめ

## 4. SVG Shape Maker
https://x.com/hiokiryujicom/status/1828765236184412583

ランダムなsvg shapeを生成 png,svgとしてexport可能 はじめ調整パラメータ数は少ないので、 追加でおねだりして増やしていくと 項目が充実していった 【応用】なにかしらのパターンを複数生成したいときはおなじ方法でできそう

## 5. Flip Card idleアニメーション付きのflip card!
https://x.com/hiokiryujicom/status/1828765637969416625

flip cardを作る場合、裏返しに 気づかないので、 idleアニメーションを指示して入れてあげるとよい cssだけで神経衰弱などのトランプゲームが作れる また、1カードで表示できる情報量が 多いときに裏面を使えるかも

## 6. Font 比較UI
https://x.com/hiokiryujicom/status/1828766237339623879

vercelのv0だとnextjsのfontが使えるので 簡単に並べられる 【応用】fontにこまったらnextjsのfontが使えないか確認してみる

## 7. Optical Flow Field
https://x.com/hiokiryujicom/status/1828767672156442910

放置観察系の定番? このようなクリエイティブ系のも簡単に作れてしまう パラメータの調整ではseed付ランダムにすることで、再現性も持たせることが可能に seed付き乱数を使うときは を使ってと明示しないと存在しないはずのMath.seedrandomを使ってエラーに



## 8.css glitch pattern
https://x.com/hiokiryujicom/status/1828768961141584226

即cssをcopy可能な、cssのパターン集 明日使える表現を視覚的に確認しながら選べる 【応用】 cssテクニックのみの表現はいろいろ分野があるので、自分のお気に入りのものでもいろいろ作れるはず。作る際には、cssをcopyできるようにしてというとよい。

## 9. 使える Emoji　一覧
https://x.com/hiokiryujicom/status/1828770151468306548

絵文字はさまざまv0から引き出せるので、このように一覧にしてしまうのもおすすめの方法 【応用】 タイプの違うiconや絵文字も並べてみたり自分好みに調整してみよう



## 10. 目の錯覚　Fraser Spiral
https://x.com/hiokiryujicom/status/1828771345217507554

このように、目の錯覚系のものを作ってと指示すると大体はつくってくれます。 いろいろと調整したい場合は、スライドで任意のパラメータを調整できるようにしてと言おう 【応用】ほかにもいろいろと、トリックアート系のものはあるので自分で作ってみると面白いかも

## 11. CSS Text Effects Showcase
https://x.com/hiokiryujicom/status/1828905587775811866

css単体で動く文字効果の一覧 使える表現を視覚的に確認したいとき、または探したいときに使える

## 12. Gradation Maker
https://x.com/hiokiryujicom/status/1828906146230665221

その場でグラデーションカラーを生成&確認 【応用】 グラデーションの生成方法には様々あるので、アルゴリズム自体の変更要求をするとよいかも


## 13. ワープ効果

https://x.com/hiokiryujicom/status/1828906725447217460

宇宙っぽい表現はかなりLLMに学習されているので、たくさんだすことができる transitionに使用してみてわ

## 14. 睡眠導入アプリ

https://x.com/hiokiryujicom/status/1828907040548499849

アプリ風のUIのものも結構簡単に作れるので、webだけじゃなくて、アプリベースで考えて作ってみると、良い出力をだせるかも

## 15. カラーパレットの生成

https://x.com/hiokiryujicom/status/1828907389845991822

この例は簡素なものだが、突き詰めていけば、よいカラーパレットアプリにできるはず 色を使った題材は映えるので、おすすめ



## 16. sns風カード

https://x.com/hiokiryujicom/status/1828907741987082684

snsのhtmlはかなり学習済みなので、各種出力できる これはx風だが、おそらくほかのプラットフォームのものもだせる おなじだとよくないので、これをベースにいろいろアレンジしてみるとよいものができあがるかも

## 17. Google Chrome Extension

https://x.com/hiokiryujicom/status/1828908296532795393

さらっとGoogle Chrome Extensionを作るときはすごく便利だと思います この例だとlocaleだけ入れ替えたものを いっきに開くというものを作りたかったが、 一発で出力&使用できた 【応用】 永続ストレージを使いたい場合、http://chrome.storage.syncを使ってと指示

## The last 

claude artifactsなどと比べて、
shadcnの作者が作っているだけあって、shadcnをとりあえずdefaultで使おうとするので、
UIのばらつきがないという点では使い勝手がよいと感じた

ただし、これはclaudeでもshadcnをつかってくださいといえばよいだけなので、差別化要因ではないような気もする

claudeの場合は、限界に達するとそこで出力をあきらめてしまうが、
v0の場合は、自動的にContinueボタンを出してくれるのでストレスがなかった

react-three-fiber、react-konvaなどいろいろと使えないライブラリもあったので、さらっとアイデアを粘土遊びのごとくためして、基本的にはcursor composerでコンポジットするのがよいと思います

またこういう系のがでたら適当に使ってみます、多分無限にリリースされると思うので

では