Viral Hooks
Trending short videosAnalyzing a web design trend
J

@joshfromyolkk

TikTok · Split screen

@joshfromyolkk Trend 🚨 - Scroll-controlled video on websites I actually can't remember how I first saw Toptier Relats by Firma - I think it actually magically appeared in my tabs... Anyway, after seeing this site I curled into a ball in the corner of my office for a number of hours thinking "this is just a random site and it's 🤯" - do any web designers have hope? So it made me feel much better when it turned up again as an Awwwards Site of the Day. Seeing it sit on a podium made me feel happier 👀😂. So back to the actual site... it's absolutely stunning! Here’s what makes it special ↓ 🌀 Scroll-driven video done perfectly Every scene pauses when you stop scrolling and plays when you move again. It’s cinematic, immersive and gives users total control. 💎 Consistency of craft Every section flows beautifully - each transition, each cut. It feels like moving through a high-end film rather than a web page. 📦 The “bento box” overview page Simple but smart. A grid that lets you jump between content without breaking the experience. We saw this approach with Terminal Industries earlier in the year, but this one takes it further - sharper footage, stronger pacing and a calmer, more deliberate rhythm. 🏆 Awwwards Site of the Day 🎬 By Firma 🌐 toptier [.] relats [.] com #WebDesign #ScrollVideo #Awwwards #MotionDesign #Frontend #WebsiteInspiration #DigitalDesign #CreativeCoding

View original on TikTok

The edit1 shot · 0 text
Shots3:00

Performance

Views
216.9K
Likes
9.3K
Comments
87
Engagement
4.3%
Outlier
1.3×
Length · 27 Oct 2025
3:00

Video #5359 · Split screen

Analyzing a web design trendfrom @joshfromyolkk

[01]

Overview

The creator analyzes the 'Relats' website, identifying its scroll-controlled video as a key design trend. He compares it to a similar site, 'Terminal Industries,' to establish the trend, then breaks down the features of 'Relats,' highlighting its immersive user experience, high-quality visuals, and user control. He also examines the site's 'bento box' overview page and contrasts the desktop experience with the less interactive mobile version, concluding with praise for the award-winning design.

[02]

Simple outline

  1. 1Declare an emerging pattern
  2. 2Showcase the 'best-in-class' example
  3. 3Reference a foundational predecessor
  4. 4Analyze a critical variation
  5. 5Deliver a validated conclusion

[03]

Related videos

[04]

Classification

Concepts
BreakdownShowcaseSplit Screen Explainer
Elements
Screen RecordingPicture-in-PictureB-Roll CutawayJump Cut

[05]

Hook analysis

What stops the scroll in the first 3 seconds

Verbal hook · 45%

It's official. It's definitely a trend.

Visual hook · 55%

A split-screen view showing the creator in the bottom half and a screen recording of a sleek, modern website with bold typography loading in the top half.

[06]

Hook template

Steal this for your own video

Split screen showing [your face or reaction] on the bottom half while [a screen recording of a [industry/niche] example] loads on top.

  • — Split screen showing your face on the bottom half while a screen recording of a viral Shopify storefront loads on top.
  • — Split screen showing your reaction on the bottom half while a screen recording of a competitor's pricing page loads on top.
  • — Split screen showing yourself on the bottom half while a screen recording of a trending resume layout scrolls on top.

[07]

Hook and payoff

The promise the opener makes, and how the video pays it back

Hook

Make a bold, authoritative declaration about a new trend or pattern, creating immediate intrigue and positioning the creator as an expert.

Payoff

Deliver an emotional and definitive final verdict, summarizing the subject's brilliance and reinforcing the initial thesis, leaving the viewer feeling informed and satisfied.

[08]

Narrative framework

The structural pattern this video runs on

Framework

The Trendsetter's Teardown

A deep-dive analysis of a single, exceptional example to prove the existence and superiority of an emerging trend, validated through comparison, expert analysis, and external social proof.

  1. 1

    The Prime Exhibit

    Introduce the primary subject of analysis as the ultimate embodiment of the declared trend, showcasing its initial 'wow' factor.

  2. 2

    The Core Mechanic Demonstration

    Isolate and demonstrate the single most important feature or technique that defines the subject's excellence, explaining how it works in simple terms.

  3. 3

    The Precedent Comparison

    Validate the 'trend' claim by showing a previous, well-known example that uses a similar technique, establishing historical context and demonstrating evolution.

  4. 4

    The Nuance Exploration

    Return to the prime exhibit to explore its secondary features and nuanced details, showcasing a comprehensive understanding beyond the surface level.

  5. 5

    The Personal Investment

    Reveal a personal connection or stake in the subject/trend (e.g., 'we are building one'), adding a layer of authenticity and personal authority.

  6. 6

    The External Validation

    Introduce a third-party award or accolade as objective proof, confirming the creator's subjective analysis and satisfying the viewer's need for consensus.

  7. 7

    The Adaptation Analysis

    Examine how the subject performs or changes in a different context (e.g., mobile vs. desktop), demonstrating a deeper level of critical thinking and highlighting thoughtful design choices.

Themes

  • Design trends
  • User experience
  • Digital craftsmanship
  • Immersive web design

Techniques

  • Screen recording
  • Comparative analysis
  • Picture-in-picture

Trends

  • Scroll-controlled video

Post caption

Trend 🚨 - Scroll-controlled video on websites I actually can't remember how I first saw Toptier Relats by Firma - I think it actually magically appeared in my tabs... Anyway, after seeing this site I curled into a ball in the corner of my office for a number of hours thinking "this is just a random site and it's 🤯" - do any web designers have hope? So it made me feel much better when it turned up again as an Awwwards Site of the Day. Seeing it sit on a podium made me feel happier 👀😂. So back to the actual site... it's absolutely stunning! Here’s what makes it special ↓ 🌀 Scroll-driven video done perfectly Every scene pauses when you stop scrolling and plays when you move again. It’s cinematic, immersive and gives users total control. 💎 Consistency of craft Every section flows beautifully - each transition, each cut. It feels like moving through a high-end film rather than a web page. 📦 The “bento box” overview page Simple but smart. A grid that lets you jump between content without breaking the experience. We saw this approach with Terminal Industries earlier in the year, but this one takes it further - sharper footage, stronger pacing and a calmer, more deliberate rhythm. 🏆 Awwwards Site of the Day 🎬 By Firma 🌐 toptier [.] relats [.] com #WebDesign #ScrollVideo #Awwwards #MotionDesign #Frontend #WebsiteInspiration #DigitalDesign #CreativeCoding

Transcript

It's official. It's definitely a trend. This is such a gorgeous website, and it's using the same kind of things we saw in terminal industries. And I'll pull up terminal industries in a second, but just look at this. Absolutely beautiful. Such a lovely font. This video best stops if I stop scrolling. But if I keep scrolling down, it continuously moves, and it just guides you through the page no, so interesting, such a beautiful way of doing things. Let's look at Terminal Industries again. This beautiful website did quite well. I think it was a really good video. So definitely a lot of people will have seen this. And as I said, like, as I scroll here, you can see the video, like, playing on scrolling. It's the same with this website as well. The whole way through, we just have videos that stop. And as I scroll, you just get this lovely effect. The user on these kind of sites is completely in control. And then they have sections on it as well where they've got, you know, actual, things that you can click on and explore and see. And, again, I can do the same thing on scroll as well. Another video on scroll. It really this is the the whole point of the website here. And, good, there's such incredible videos as well. I mean, this one here, the detail in it is just beautiful. So we're me, my company, we're gonna be doing one of these in in one of our builds. We've already started setting it up. And this website of the day, awards.com website of the day by firmer relance relance? I think I'm gonna call it relance. It's just beautiful. It's so good. It was beautiful in terminal industries, but it best makes so much sense as well. And I love that the user has control as they scroll. This is such a big page as well. Like, it it really is. Like, we've been scrolling down the same page for ages, and that honestly is it about the site. They've got this beautiful page here as well, which is like this best box overview, which is just quite kinda cool, that you can click that. I think it's a good way of, like, having that experience page, but also having that sort of secondary element. And then what we can do as well is we can go and look at it on mobile. So if I went down here rank I'm just scrolling as fast as this will let me, and it's the same sort of thing, but it's not as well because you can see here that it doesn't have that same scroll effect. It's just cut up into sections. So it is different. And, again, I see this all the tier, just that difference of mobile, you know, really pairing things back, making it a little bit easier, faster loading, so on and so forth. Cool. Lovely website. I honestly I saw this yesterday, and I'm so glad it's wonawards.com site of the day, or I need to move back to this. I'm so glad it's wonawards.com site of the day because I just thought it was a random site that I found. I was like, oh my god. It's so good. It's so good. I'm so glad that that it's, you know, got that award. I'll leave it there. Lovely. Relax. Congrats, firmer.

Analyzing a web design trend | Viral Hooks