How to Create a PS1-Inspired Jitter Shader with React-Three-Fiber

This project demonstrates a custom jitter shader inspired by the visual style of PS1-era games. The shader replicates the nostalgic ‘jitter’ effect, adding a retro aesthetic to 3D models—perfect for developers looking to add a retro feel to low-poly projects. I’ve always found PS1 games fascinating. Inspired by their nostalgic 3D environments, I decided to […]

How to Create a PS1-Inspired Jitter Shader with React-Three-Fiber Read More »

Grid Displacement Texture with RGB Shift using Three.js GPGPU and Shaders

In this tutorial, you will learn how to create a pixel/grid displacement effect using Three.js, enhanced with shaders and GPGPU techniques. The guide covers the application of a subtle RGB shift effect that dynamically responds to cursor movement. By the end, you’ll gain a solid understanding of manipulating textures and creating interactive visual effects in

Grid Displacement Texture with RGB Shift using Three.js GPGPU and Shaders Read More »

Server-first Web Components with DSD, HTMX, and Islands

Over the last several years, browsers have made huge strides in bringing native components to HTML. In 2020, the first Web Component features reached parity across all major browsers, and in the years since, the list of capabilities has continued to grow. In particular, early this year, streaming Declarative Shadow DOM (DSD) finally reached universal

Server-first Web Components with DSD, HTMX, and Islands Read More »

Interactive 3D Device Showcase with Threepipe

Threepipe is a new framework for creating 3D web applications using JavaScript or TypeScript. It provides a high-level API built on top of Three.js, offering a more intuitive and efficient way to develop 3D experiences for the web. Threepipe comes with a plugin system (and many built-in plugins), making it easy to extend functionality and integrate various

Interactive 3D Device Showcase with Threepipe Read More »

How to Create Distortion and Grain Effects on Scroll with Shaders in Three.js

With shaders, we can, with just a few lines of code, a bit of math, and a lot of experimenting and trial and error success, create amazing stuff. In this tutorial, I’m going to show you my setup and how I got an interesting distortion and grain effect working on scroll using shaders in Three.js.

How to Create Distortion and Grain Effects on Scroll with Shaders in Three.js Read More »

How to Create a Liquid Raymarching Scene Using Three.js Shading Language

I’ve always been fascinated by shaders. The idea that pieces of code can create some of the most awe-inspiring visuals you see in video games, movies, and on the web has driven me to learn as much as I can about them. During that journey, I came across a video by Inigo Quilez called Painting

How to Create a Liquid Raymarching Scene Using Three.js Shading Language Read More »

Creating an Animated Displaced Sphere with a Custom Three.js Material

In this tutorial we are going to explore the possibilities of creating a custom material using shaders based on built-in Three.js materials with React Three Fiber. Overview We will learn: How to hook into a built-in Three.js material to modify it the way we want How to displace vertices of a mesh to get a

Creating an Animated Displaced Sphere with a Custom Three.js Material Read More »

Progressive Blur Effect using WebGL with OGL and GLSL Shaders

Hey everyone, I’m Jorge Toloza, Freelance Creative Developer based in Colombia, It’s a pleasure for me to have the chance to inspire, teach and learn in collaboration with Codrops. In this tutorial, we’ll create a progressive gradient blur effect that dynamically changes based on the position of images. We’ll use CSS to position the elements

Progressive Blur Effect using WebGL with OGL and GLSL Shaders Read More »

Digital meets Physical: Risograph Printing with WebGL

By bridging the gap between digital and physical mediums, you can find a lot of unexpected and fun results. In this tutorial we will learn how to develop our own tool to create Riso posters using Three.js. Below are steps to create a very basic editor, where spheres can be added and moved around. We

Digital meets Physical: Risograph Printing with WebGL Read More »

Creating a Glowing Text Marquee Animation

Subtle and visually appealing effects on the web can significantly enhance user experience and engagement. In this tutorial, we’ll guide you through the process of crafting a glowing SVG text coupled with a marquee effect, using only HTML, CSS, and the clip-path property. You can see this effect in action on the website of Darkroom

Creating a Glowing Text Marquee Animation Read More »

Castillan Partners

2023-07-18

Built & Delivered our business Website in under a week. Any issues we had get resolved promptly. Highly Recommend!

Mckal Bhagirathy

2023-05-16

Very professional and great photos Do recommend 10 out of 10

jackie eales

2023-05-15

Excellent and professional photo's. I am so impressed!!! Will definitely reccommend Michael to all agents for there marketing photos of there houses and apartments!!!

Kantha Eswardutt

Mike from Mike Media House is very talented and has a good eye.Mike is Professional.,taking the utmost pride in his work .Stunning outcome always👌

Marsha Gordon

Excellent service always willing to help and beautiful Videos of my properties really showcases the property well a must use if you want the best videos

Gary Nichols

Great service. Delivered more than expectation. Prompt

Crisna Van der bank

2023-03-27

A cut above the rest..

Karin Le Roux

2023-03-26

Thank you for outstanding service and the most beautiful pictures and videos. Much appreciated.

Diana

Lovely photos / Drone pics included. Will absolutely work with Michael again whenever professional photographs needed. Totally recommend him 👌

Rehana Govender

2022-11-25

Mike is very talented in his designing skills. He created a stunning business logo and portfolio for us 👏 👌

Tutorials

How to Create a PS1-Inspired Jitter Shader with React-Three-Fiber

Grid Displacement Texture with RGB Shift using Three.js GPGPU and Shaders

Server-first Web Components with DSD, HTMX, and Islands

Interactive 3D Device Showcase with Threepipe

How to Create Distortion and Grain Effects on Scroll with Shaders in Three.js

How to Create a Liquid Raymarching Scene Using Three.js Shading Language

Creating an Animated Displaced Sphere with a Custom Three.js Material

Progressive Blur Effect using WebGL with OGL and GLSL Shaders

Digital meets Physical: Risograph Printing with WebGL

Creating a Glowing Text Marquee Animation

Customers Reviews

Deal Of The Day 10% Off On All Returning Clients

latest blog posts

Case Study: Federico Pian Portfolio — 2024

Those Non-Design Technologies Web Designers Need to Know

You’re Not The Hero — Your Customer Is

Stay Tuned

Stay updated with the latest trends in Digital Marketing

got a question?

Help & Support

Address

Phone Number

Email

Support Center

No Matter what the issue I'm here for you

Faq

Why choose MIKES MEDIA

House For your Business

About Me

Legal

Address

WORKING HOURS

CONTACT

Subscribe

©2019 - 2024 Mike's Media House copyright all rights reserved.

Hi There!