ASCII Ocean

Show Preview
ASCII Ocean
ASCII Ocean

About ASCII Ocean

An ocean of motion, built from ASCII.

Add a living underwater world to your Framer website with ASCII Ocean — an interactive animation featuring swimming sharks, moving schools of fish, and glowing trails rendered in a distinctive terminal-inspired style.

Features

  • 8 shark styles — from classic and hammerhead to tiger, mako, thresher, and more.

  • Customizable scenes — adjust shark count, size, fish population, and movement speed.

  • Your visual style — customize the background, grid, fish colors, shark tones, and accent colors.

  • Interactive behavior — move your cursor to disturb nearby fish and click to create a splash.

  • Adjustable ASCII rendering — change the character density and cell size to shape the visual effect.

  • Responsive canvas — adapt the component to different frame dimensions.

Perfect for

Creative portfolios, experimental landing pages, digital art projects, developer websites, and bold hero sections that need something more memorable than a static background.

How to use

  1. Copy the component into your Framer project.

  2. Add it to your canvas and resize it to fit your layout.

  3. Customize the animation using the properties panel.

  4. Preview your page and adjust the settings to match your design.

Make the ocean your own.

Credits

Based on the ASCII shark simulation by stackedlol: https://github.com/stackedlol/ascii-sharks

See the applicable source licence and attribution requirements before redistribution.