How to create your own module

All Threads

How to create your own module

A custom FPS simulation module that dynamically adjusts based on scroll progress, illustrating an interactive approach to showcasing optimization skills.

How to create your own module

Today, we will explore how to create a custom module. But before we dive in, I want to share the backstory of an interesting case that inspired its development.

How an FPS optimization idea turned into an interactive effect

Imagine a game developer who optimizes their code so well that the FPS in their game increases several times over. That’s exactly what happened to my friend, a specialist in game development performance. He’s not just a talented programmer—he’s a true master of optimization.

After a period of intense work, he decided to take a break. But when he started looking for a new job, the question arose: what’s the best way to showcase his skills? He decided to create a personal portfolio website that wouldn’t just look professional but would also demonstrate his abilities in real time.

Visualizing the effect

As we brainstormed ideas, we stumbled upon a concept for an interactive block that would clearly illustrate the essence of his work. This led to the idea of a website section where the FPS would increase as the user scrolls—mimicking the effect of optimization in a game.

In real-world development, FPS is often compared before and after optimization. A logical approach would have been to show screenshots or videos of an improved scene. But that wasn’t enough—we wanted something dynamic and interactive. That’s when we came up with the idea of simulating an FPS counter that changes as the page scrolls.

How to create a module that "optimizes" FPS?

Since StringTune makes it easy to create custom modules, we can simulate FPS changes on scroll in just a few steps.

Today, we’ll go through a simplified version for demonstration purposes, but you can expand upon it. To keep things straightforward, our module will:

Define a minimum and maximum FPS (e.g., 20 → 144).
Smoothly adjust the FPS value during scrolling using StringProgress.
Add slight fluctuations (±5 FPS) for realism.

Step 1: Creating the module class

We'll extend StringProgress since we need access to the scroll progress (ranging from 0 to 1).

class StringFakeFPS extends StringTune.StringProgress {
  constructor(visitor) {
    super(visitor);
    this.htmlKey = "fake-fps"; // HTML attribute for the module
  }
}

Step 2: Setting minimum and maximum FPS

To allow flexibility, we’ll let users configure FPS parameters via HTML attributes.

initObject(globalId, object, el, attributes) {
  super.initObject(globalId, object, el, attributes);
  object.setProperty("min-fps", parseInt(attributes["string-min-fps"] || 20));
  object.setProperty("max-fps", parseInt(attributes["string-max-fps"] || 144));
}

Example HTML:

<div string="fake-fps" string-min-fps="30" string-max-fps="120"></div>

Step 3: Making FPS changes look realistic

To avoid an unrealistically smooth value, we’ll introduce random variations within ±5 FPS:

function getRealisticFPS(fps) {
  return Math.round(fps + (Math.random() * 10 - 5));
}

Step 4: Updating FPS on scroll

Now, let’s bind FPS changes to page scrolling.

onScroll(data) {
  super.onScroll(data);
  this.objects.forEach((object) => {
    let progress = object.getProperty("progress");
    let minFPS = object.getProperty("min-fps");
    let maxFPS = object.getProperty("max-fps");

    let fps = minFPS + progress * (maxFPS - minFPS);
    object.el.textContent = `FPS: ${getRealisticFPS(fps)}`;
  });
}

Step 5: Registering the module in StringTune

Now, we need to add our module to the system to activate it.

import { StringTune } from '@fiddle-digital/string-tune';  
const stringTune = StringTune.getInstance();  
stringTune.use(StringFakeFPS);  
stringTune.start(60);

Step 6: Adding HTML for testing

<div style="height: 100vh; display: flex; align-items: center; justify-content: center;">
  <h1>Scroll down</h1>
</div>

<div style="height: 200vh; display: flex; align-items: center; justify-content: center;">
  <div string="fake-fps" string-min-fps="20" string-max-fps="144" 
       style="font-size: 24px; font-weight: bold; text-align: center;">
    FPS: 20
  </div>
</div>

I created this module for my friend, and now he can use it anywhere on his website.

Sometimes, creativity in coding isn’t about complex algorithms or groundbreaking technologies—it’s about presentation. We could have just written an article or shown graphs, but interactive engagement evokes far stronger emotions.

This module follows a simple idea: changing a number while scrolling. Yet, its simplicity is what makes it so effective. It’s a reminder that even the smallest details can make a product unique—it just takes the right perspective.