Command Palette

Search for a command to run...

Loading component...

Components paid Ascii Simulation

Ascii Simulation

A stunning ASCII art effect that renders 3D models as text characters in real-time. Features interactive controls, customizable styling, and smooth animations. Perfect for creating retro-style visualizations with mouse interaction.

Best Viewed on

For best experience clickto open in full screen mode

Dependencies

three

Interaction Type

Drag to rotate the 3D model
ASCII art rendering with Three.js

CLI UNAVAILABLE

pro component, try copying the source code from top right corner

How to use

import { AsciiSimulation } from "@/components/v1/skiper14";

const BasicDemo = () => {
  return (
    <div className="h-screen w-full">
      <AsciiSimulation modelPath="/models/car.glb" className="h-full w-full" />
    </div>
  );
};

Customized ASCII Effect

import { AsciiSimulation } from "@/components/v1/skiper14";

const CustomDemo = () => {
  return (
    <div className="h-screen w-full bg-black">
      <AsciiSimulation
        modelPath="/models/car.glb"
        asciiChars=" .:-+*=%@#"
        invert={false}
        fontSize="3px"
        lineHeight="3px"
        backgroundColor="black"
        textColor="lime"
        fontFamily="Courier New"
        rotationSpeed={0.002}
        enableZoom={true}
        enablePan={true}
        className="h-full w-full"
      />
    </div>
  );
};
Props
Description

modelPath

Path to the 3D model file (.glb format)

className

CSS classes for the container

asciiChars

Characters used for ASCII rendering

invert

Invert the ASCII effect colors

fontSize

Font size for ASCII characters

lineHeight

Line height for ASCII characters

modelScale

Scale factor for the 3D model

rotationSpeed

Speed of automatic model rotation

backgroundColor

Background color of the ASCII effect

textColor

Text color of the ASCII characters

fontFamily

Font family for ASCII characters

enableZoom

Enable zoom controls

enablePan

Enable pan controls

enableRotate

Enable rotation controls

Important notes

  • Requires a 3D model in GLB format for best results
  • to download 3d models, you can use sketchfab and place them in the "public/models/" directory
  • The ASCII effect works best with models that have good contrast and detail
  • Performance may vary based on model complexity and screen resolution
  • The component automatically handles cleanup and memory management

Attribution

Inspired by and adapted from Three.js ASCII Effect

Source code

Click on the top right
to view the source code

Keep in mind

Most components here are recreations of the best out there. I don't claim to be the original creator. This is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone, but if I missed something, let me know.

Contact

Additionlly, if you find any bug or issue, feel free to
Drop a dm.

License & Usage:

  • Free to use and modify in both personal and commercial projects.
  • Attribution to Skiper UI is required when using the free version.
  • No attribution required with Skiper UI Pro.
PreviousNext