DEV Community: Himanshu Jain

My Journey into Framer Motion: Building a Typewriter

Himanshu Jain — Tue, 23 Dec 2025 09:36:42 +0000

So, I’ve been diving into Framer Motion lately and decided to create the classic: Typewriter effect. It looks super professional, but once you break it down, the logic is actually really elegant. Here’s how I built it and what I learned along the way.

1. The Strategy: Break It Down

const characters = Array.from(text);

The first thing the code does is split the text. We use Array.from(text) to turn a string into an array of individual characters.

The reason for this is simple: to animate each character individually, they each need their own "seat" (an HTML element) in the DOM. If the text stayed as one long string, Framer Motion would just animate the whole block at once.

2. The Power of Variants

This is where it gets cool. I learned and used a concept called Variants in Framer Motion. Think of variants as "labels" for your animation states. Instead of writing messy inline styles, you define a hidden state and a visible state.

const containerVariants = {
    hidden: { opacity: 1 },
    visible: {
      opacity: 1,
      transition: {
        delayChildren: delay,
        staggerChildren: duration,
      },
    },
  };

  const characterVariants = {
    hidden: { opacity: 0, y: 5 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        type: "spring" as AnimationGeneratorType,
        damping: 12,
        stiffness: 200,
      },
    },
  };

What’s powerful here is the Parent-Child control. By giving the container a variant label like "visible," it automatically tells all the children (the letters) to switch to their "visible" state too. It’s like a conductor leading an orchestra.

3. The "Double Hiding" Gotcha

One thing that tripped me up was setting the container's opacity. You’ll notice in the hidden variant, the container is actually set to opacity: 1.

Wait, why? Well, if the container is hidden and the letters are hidden, you get "double hiding." When the animation starts, the whole box would fade in while the letters are also fading in—it looks messy. By keeping the container at opacity: 1, the "box" is always there, and we only see the magic of the letters appearing one by one.

4. Orchestration: Staggering

The "typewriter" feel comes from two specific transition properties:

delayChildren: This sets a countdown before the first letter even thinks about moving.
staggerChildren: This is the secret sauce. It sets a tiny time gap (like 0.05s) between each subsequent character. Instead of a "pop," you get that rhythmic, rolling reveal.

5. Adding Some "Spring"

Instead of a boring, flat animation, I used a spring transition for the characters. By playing with stiffness and damping, the letters don't just appear—they kind of snap into place with a bit of life. It makes the digital text feel a bit more tactile and physical.

What's next?

Now that We've got the basics down, we can try thinking about how to speed it up. If we wanted to write "two words at a time" for a faster read, how can we achieve that?

Authentication Vs Authorization

Himanshu Jain — Sun, 06 Jul 2025 20:40:59 +0000

I recently stumbled upon this age-old question about the difference between Authentication and Authorization while working on the sign-in page using OAuth 2.0 for a project. I realised OAuth 2.0 is primarily an authorization protocol and uses OIDC (Open ID Connect) to authenticate.

Here's how I like to think about the difference:

Authentication is Who You are?
Authorization is What You Are Allowed To Access?

Let's break it down with an example. Suppose you(client application) want to check into a hotel, you'll first need to provide the booking details and some identity card(login info) for the hotel to identify you (Who You Are). The hotel authenticates you and then provides you access to a single room and other amenities like the pool, the gym, breakfast area, i.e, you are allowed to access only certain areas (What You Are Allowed To Access).

A real-world example is, when we click on a sign-in using Google button in an application we are first routed to a sign in page (Authentication) which prompts us to enter the password if the user is not already signed in and then we go to the page where we are asked to select all the permission that we are allowing the application to access on behalf of our user (Authorization)

These two are mostly implemented separately because they provide:

Scalability: We can have different authentication providers that are responsible for Authentication while needing the same Authorization needs for the application.
Security: Even if someone bypasses authentication, they will still need authorization access.

And the separation of concerns allows granular and maintainable implementations.

React Fiber - Rotating A Cube

Himanshu Jain — Wed, 14 May 2025 23:51:27 +0000

In the previous post, we successfully rendered our first cube! (See it in action)

Now, let's add some movement and transform that static cube into a dynamic object.

For A quick refresher on three js and three fiber you can follow this article

We'll be using the useFrame hook from react-three/fiber. This hook plays a crucial role in creating animations

UseFrame

The useFrame hook takes a callback function as an argument and calls it just before each animation loop. The callback function receives two arguments state and delta.

State - This is the object that stores a lot of information about the current state, It contains information like:
1. Clock - A three js clock object which tell us the current time and the delta time.
2. Camera - A reference to the current active camera in the scene.
3. Scene - A reference to the root scene object.
4. gl - reference to the webGL rendering context.
5. size - an object with height and width of the canvas.
6. Viewport - an object containing the size of viewport in pixels.
Delta - This number denotes the time elapsed after the last frame in seconds. It can be used to create the frame-independent animations, for eg: we can multiply the delta value with the desired change in position or rotation to ensure no matter what the frame rate of the device is, the objects are at the correct position.

While useFrame is powerful for animations, it's important to avoid performing heavy calculations within the callback function. This can negatively impact performance and cause stuttering in your animation.

Rotating the Cube

Enough theory, let's get into the action, we will store the reference of our Box geometry and in each animation loop, change the rotation by some factor.

import { useRef } from "react";

import { OrbitControls, Box } from "@react-three/drei";
import { Canvas, useFrame } from "@react-three/fiber";

//type
import type { Mesh } from "three";

const ROTATION_SPEED = 0.005;

function Cube() {
  const boxRef = useRef<Mesh>(null);

  useFrame(() => {
    if (boxRef.current) {
      boxRef.current.rotation.x += ROTATION_SPEED;
      boxRef.current.rotation.y += ROTATION_SPEED;
    }
  });

  return (
    <Box ref={boxRef}>
      <meshBasicMaterial color="orange" />
    </Box>
  );
}

export default function App() {
  return (
    <div style={{ height: "100vh", width: "100vw" }}>
      <Canvas>
        <OrbitControls />
        <gridHelper />
        <Cube />
      </Canvas>
    </div>
  );
}

As a fun practice exercise, try creating a sphere that moves up and down repeatedly.

Delving into the World of 3D Web: From WebGL to ThreeJs and React Three Fiber

Himanshu Jain — Wed, 19 Mar 2025 10:49:00 +0000

Have you came across some interesting websites like this famous one https://bruno-simon.com/ and wondered how all this is achieved in a web browser since creating these complex animations isn't possible with just HTML and CSS. Well, the magic lies in WebGL, a Javascript API to render high-performant 2d and 3d elements. WebGL leverages the hardware GPUs and hence can render the high interactive elements.
While WebGL offers all such advantages, it is still a very low-level API, and creating things out of it requires quite a bit of code. This is where ThreeJs steps in

ThreeJs

ThreeJs is an open-source library that uses WebGL renderer and provides a more declarative and a lot easier way to create and render 2d and 3d graphics and animation on the web browser.

The official documentation offers a comprehensive deep dive into ThreeJS. Let's quickly go through the main objects of it:

Renderer - This is the main object that renders the objects that are part of the area covered by the camera, it can be your webGL renderer
Scene - This consists of all your various objects, like light, camera, geometries, meshes. These all things are arranged in scenes in a parent-child tree structure and are referred to as scenegraph
Geometry - This is an object consisting of the vertex of the shapes like sphere, cube etc.
Material - While geometry represents the vertices the material represents the surface properties of our shapes, for eg: the color of the surfaces, the transparency, reflection properties, etc:
Mesh- A mesh combines a geometry and a material, giving your object a visible representation. You can have multiple meshes with the same geometry and material to create identical objects in different locations.
Texture - These represents loaded images that can be used by our materials over which we can wrap these images.
Light - Lights objects illuminate your scene and create a sense of depth and dimension. Various types of lights exist, such as point lights, ambient lights, and directional lights.

React Three Fiber

React Three Fiber acts as a bridge between the powerful capabilities of Three.js and the declarative nature of React development. It streamlines the process of creating and manipulating 3D scenes within your React applications.

Here's how with normal three js we will need to do the following things to create a scene. Render a canvas element get its reference, create renderer, camera, and scene objects, define our geometry material and mesh then add all of them to the scene object.

const canvas = document.querySelector('#c');
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)

const renderer = new THREE.WebGLRenderer()
renderer.setSize(width, height)
document.querySelector('#canvas-container').appendChild(renderer.domElement)

const mesh = new THREE.Mesh()
mesh.geometry = new THREE.BoxGeometry()
mesh.material = new THREE.MeshStandardMaterial()

scene.add(mesh)

function animate() {
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
}

animate()

whereas with react three fiber it is as simple as

import { Canvas} from "@react-three/fiber";

<Canvas>
 <mesh>
    <boxGeometry />
    <meshBasicMaterial />
  </mesh>
</Canvas>

Next Step: Let's learn to write our hello world code with react three fiber

React Three Fiber - Hello World

Himanshu Jain — Wed, 19 Mar 2025 10:42:50 +0000

Creating this series
In the world of 3d development, the classic "Hello World" program generally involves rendering a cube. Let's create one ourselves using React Three Js and React Three Fiber.

Creating a cube is fairly simple with react three fiber and react three drei but we will first setup our scene before rendering any of the geometry or meshes.

If terms like Meshes, geometry, and scene sound unfamiliar, fear not! Before diving in, we recommend checking out this helpful resource also: What is ThreeJS and ReactThree Fiber

Let's get started with setting up our scene

import { OrbitControls } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";

export default function App() {
  return (
    <div style={{ height: "100vh", width: "100vw" }}>
      <Canvas>
        <OrbitControls />
        <gridHelper />
      </Canvas>
    </div>
  );
}

Scene Setup

Canvas - This is the essential component for most React Three Fiber applications. It acts as a container, providing context for other Three.js components like lights, cameras, and meshes. It also renders the HTML canvas element where your 3D graphics are displayed and updates it for animations
OrbitControls - This component allows you to explore the scene using your mouse, similar to how a camera can pan, zoom, and rotate around a physical space. We're using it with gridHelper for beginners to visualize the scene layout easily.
gridHelper - It helps to generate a grid of lines with specified dimensions which helps us to visualize the scale of the scene by providing reference points.

You should now see a gray line in the browser. If you move your mouse while clicking, you'll see the entire grid appear.

Rendering The Cube

Now, let's render the cube using BoxGeometry from Three.js and meshBasicMaterial to define its color.

import { ..., Box } from "@react-three/drei";

export default function App() {
  return (
    <div style={{ height: "100vh", width: "100vw" }}>
      <Canvas>
      ...
        <Box>
          <meshBasicMaterial color="orange" />
        </Box>
      </Canvas>
    </div>
  );
}

Box: This component from @react-three/drei is a simple wrapper around Three.js's BoxGeometry. Geometry defines the shape of an object using sets of point coordinates.
meshBasicMaterial: This is a basic material provided by Three.js. Materials describe the visual properties of a geometry's faces, including color, opacity, and more.

Congratulations, we have just rendered our first 3d scene.🎉🎉🎉
Next Step: Let's learn to rotate the cube