いま流行りのvercelの【v0】の自作アイデア17選✨
2日前にnoteに投稿したものと同じ記事です
最近はやってるっぽいので、今日課金して、適当にいろいろ作ってみたので、作例を紹介します。
爆速でいろいろ作れたので楽しかったです
これから、夏休みとかでいろいろつくってみたいなという人は参考にしてみてください
xの動画が使いたかったので、この記事ではそちらを貼っただけです
それでは 3,2,1 Go
1. Enhanced Categorized Cubic Bezier Playground
cssのcubic bezier curveのplayground! 視覚的にわかりやすく、アニメーションを確認して、cssをcopyできる【応用】なにか網羅的かつ視覚的に確認したいときは、この方式は使えるなにか並べたいときはuse grid autofillと打ち込むと吉
2. Circular Piano
音が実際にならせる楽器！ 見た目も自由に変形 【応用】 自分専用の楽器を作りたいときは、ピアノに限らず使えるかも、ユニークなオリジナルの楽器を作成してみてね 音はtonejsを使って！と言ってあげるとスムーズ
3. Pachinko with Params Modal
ながめているだけで楽しいカラフルな釘付きパチンコ はじめは釘やボールに個性はなかったけど、 add idiosyncrasies to balls(ボールに特徴を足して) などと打って個性を調整 2Dの物理エンジンはmatterjsが使いやすい場面も多いのでおすすめ
4. SVG Shape Maker
ランダムなsvg shapeを生成 png,svgとしてexport可能 はじめ調整パラメータ数は少ないので、 追加でおねだりして増やしていくと 項目が充実していった 【応用】なにかしらのパターンを複数生成したいときはおなじ方法でできそう
5. Flip Card idleアニメーション付きのflip card!
flip cardを作る場合、裏返しに 気づかないので、 idleアニメーションを指示して入れてあげるとよい cssだけで神経衰弱などのトランプゲームが作れる また、1カードで表示できる情報量が 多いときに裏面を使えるかも
6. Font 比較UI
vercelのv0だとnextjsのfontが使えるので 簡単に並べられる 【応用】fontにこまったらnextjsのfontが使えないか確認してみる
7. Optical Flow Field
放置観察系の定番? このようなクリエイティブ系のも簡単に作れてしまう パラメータの調整ではseed付ランダムにすることで、再現性も持たせることが可能に seed付き乱数を使うときは を使ってと明示しないと存在しないはずのMath.seedrandomを使ってエラーに
8.css glitch pattern
即cssをcopy可能な、cssのパターン集 明日使える表現を視覚的に確認しながら選べる 【応用】 cssテクニックのみの表現はいろいろ分野があるので、自分のお気に入りのものでもいろいろ作れるはず。作る際には、cssをcopyできるようにしてというとよい。
9. 使える Emoji 一覧
絵文字はさまざまv0から引き出せるので、このように一覧にしてしまうのもおすすめの方法 【応用】 タイプの違うiconや絵文字も並べてみたり自分好みに調整してみよう
10. 目の錯覚 Fraser Spiral
このように、目の錯覚系のものを作ってと指示すると大体はつくってくれます。 いろいろと調整したい場合は、スライドで任意のパラメータを調整できるようにしてと言おう 【応用】ほかにもいろいろと、トリックアート系のものはあるので自分で作ってみると面白いかも
11. CSS Text Effects Showcase
css単体で動く文字効果の一覧 使える表現を視覚的に確認したいとき、または探したいときに使える
12. Gradation Maker
その場でグラデーションカラーを生成&確認 【応用】 グラデーションの生成方法には様々あるので、アルゴリズム自体の変更要求をするとよいかも
13. ワープ効果
宇宙っぽい表現はかなりLLMに学習されているので、たくさんだすことができる transitionに使用してみてわ
14. 睡眠導入アプリ
アプリ風のUIのものも結構簡単に作れるので、webだけじゃなくて、アプリベースで考えて作ってみると、良い出力をだせるかも
15. カラーパレットの生成
この例は簡素なものだが、突き詰めていけば、よいカラーパレットアプリにできるはず 色を使った題材は映えるので、おすすめ
16. sns風カード
snsのhtmlはかなり学習済みなので、各種出力できる これはx風だが、おそらくほかのプラットフォームのものもだせる おなじだとよくないので、これをベースにいろいろアレンジしてみるとよいものができあがるかも
17. Google Chrome Extension
さらっと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でコンポジットするのがよいと思います
またこういう系のがでたら適当に使ってみます、多分無限にリリースされると思うので
では
Discussion