技法

Modal over dimmed page

ライブラリのうち26フレームがModal over dimmed pageに一致し、14ブランドの動画17本にまたがっています。どれも動画そのものから計測したもので、説明文から読み取ったものではありません。つまりこれは、スタイルガイドが説くあるべき姿ではなく、実際にどう使われているかです。

このページにレンダリング画像も機材リストもありません。下にあるのはどれも実際に見に行ける動画の本物の1秒であり、どの数値もサンプルからの推定ではなく実フレームを数えたものです。

フレーム
26
動画
17
ブランド
14
カット間隔の中央値
6.2秒

最も多く撮っているのは

各ブランドがこの切り口にどれだけフレームを出しているかの順です。

GitHub 6フレームOpenAI 3フレームPerplexity 3フレームCursor 2フレームHeadshotPro 2フレームSketch Together 2フレーム
Notion Skills for your whole team are here. Most agents start from scratch.... at 0:16
NotionSkills for your whole team are here. Most agents start from scratch....
0:16
Timestripe Turn incidents and security findings into prioritized work at 0:14
TimestripeTurn incidents and security findings into prioritized work
0:14
Webflow Welcome to Webflow: Build, Launch, Optimize at 1:34
WebflowWelcome to Webflow: Build, Launch, Optimize
1:34
Anthropic We’ve developed Claude for Chrome, where Claude works directly in you... at 0:22
AnthropicWe’ve developed Claude for Chrome, where Claude works directly in you...
0:22
The Browser Company How to hack any website’s design with no code (Arc Boosts) at 1:05
The Browser CompanyHow to hack any website’s design with no code (Arc Boosts)
1:05
Mobbin I Gave Claude 600,000 UI Screens… Then This Happened at 0:34
MobbinI Gave Claude 600,000 UI Screens… Then This Happened
0:34
Cursor Cloud agents and automations now support multi-repo environments. Co... at 0:03
CursorCloud agents and automations now support multi-repo environments. Co...
0:03
Cursor Cloud agents and automations now support multi-repo environments. Co... at 0:25
CursorCloud agents and automations now support multi-repo environments. Co...
0:25
Blaze Want to become an internet millionaire? at 2:10
BlazeWant to become an internet millionaire?
2:10
OpenAI Use Your Computer and Browser at 2:06
OpenAIUse Your Computer and Browser
2:06
GitHub Automate recurring developer tasks with the GitHub Copilot app | Tutorial for beginners at 1:06
GitHubAutomate recurring developer tasks with the GitHub Copilot app | Tutorial for beginners
1:06
GitHub Automate recurring developer tasks with the GitHub Copilot app | Tutorial for beginners at 1:10
GitHubAutomate recurring developer tasks with the GitHub Copilot app | Tutorial for beginners
1:10
GitHub Automate recurring developer tasks with the GitHub Copilot app | Tutorial for beginners at 1:14
GitHubAutomate recurring developer tasks with the GitHub Copilot app | Tutorial for beginners
1:14
GitHub Automate recurring developer tasks with the GitHub Copilot app | Tutorial for beginners at 1:18
GitHubAutomate recurring developer tasks with the GitHub Copilot app | Tutorial for beginners
1:18
GitHub Automate recurring developer tasks with the GitHub Copilot app | Tutorial for beginners at 1:22
GitHubAutomate recurring developer tasks with the GitHub Copilot app | Tutorial for beginners
1:22
GitHub Automate recurring developer tasks with the GitHub Copilot app | Tutorial for beginners at 1:26
GitHubAutomate recurring developer tasks with the GitHub Copilot app | Tutorial for beginners
1:26
Perplexity 1. Upload a photo. 2. Get turned into a Perplexity-style portrait. 3.... at 0:19wide presenter
Perplexity1. Upload a photo. 2. Get turned into a Perplexity-style portrait. 3....
0:19
Perplexity 1. Upload a photo. 2. Get turned into a Perplexity-style portrait. 3.... at 0:22wide presenter
Perplexity1. Upload a photo. 2. Get turned into a Perplexity-style portrait. 3....
0:22
Perplexity 1. Upload a photo. 2. Get turned into a Perplexity-style portrait. 3.... at 0:25corner inset
Perplexity1. Upload a photo. 2. Get turned into a Perplexity-style portrait. 3....
0:25
WorkOS WorkOS Pipes | The OAuth Integration You've Been Missing at 2:54corner inset
WorkOSWorkOS Pipes | The OAuth Integration You've Been Missing
2:54
HeadshotPro Removing backgrounds in HeadshotPro at 0:04wide presenter
HeadshotProRemoving backgrounds in HeadshotPro
0:04
OpenAI Getting Started with ChatGPT Work at 1:02corner inset
OpenAIGetting Started with ChatGPT Work
1:02
OpenAI Create Slides, Docs, and Templates at 0:54corner inset
OpenAICreate Slides, Docs, and Templates
0:54
HeadshotPro MagicLink for HeadshotPro at 2:53corner inset
HeadshotProMagicLink for HeadshotPro
2:53
Sketch Together Hilos. A place for your team and agents to make stuff at 0:57corner inset
Sketch TogetherHilos. A place for your team and agents to make stuff
0:57
Sketch Together Hilos. A place for your team and agents to make stuff at 1:07corner inset
Sketch TogetherHilos. A place for your team and agents to make stuff
1:07
これで全 26 枚です。

比較できる他の技法

Shallow depth of field 5,342Hard cut on beat 3,103Full bleed output no chrome 3,091Centred wordmark on black 2,369Cursor led reveal 2,350Ui float with drop shadow 2,096Long lens background compression 1,100Text plate left third 816Full bleed ui no chrome 751Long lens compression 610Hard cut to black 601Centred talking head 554Subject on right third 533Generous negative space 482Centred subject 471Full bleed no chrome 431Centred wordmark on white 414Full bleed screen recording 409Wide establishing shot 390Full bleed screen capture 380Presenter pip bottom right 370Medium close up 367Subject on left third 346Centred medium close up 342