A tool that deterministically generates visual patterns based on text-based input.
promo.mov
- 🖌️ Graphics: Generate shapes and patterns based on text input
- 🎨 Colors: Apply colors based on text input
- 🪄 Deterministic: Get the same shapes, patterns, and colors for the same input
There are a number of pain points that this tool addresses:
- blogs with no graphics are boring
- graphics take time/money to create
- hosting graphical images is expensive
npm install rothko-js<script setup lang='ts'>
import { RothkoCard } from 'rothko-js'
const textInput = ref<string>()
</script>
<template>
<rothko-card source="textInput" />
</template>| Prop | Type | Default | Description |
|---|---|---|---|
| source | string | - | The text input used to generate the graphics |
| pattern | string | 'quad' | The pattern used to generate the graphics (e.g. quad, circle, triangle) |
| color | string | - | The background color |
| height | number | '100px' | The height of the canvas |
| width | number | 'auto' | The width of the canvas |
| padding | number | '0.5rem' | The padding of the canvas |
| borderRadius | number | '5px 5px 0px 0px' | The border radius of the canvas |
rothko-js uses a hash function to generate colors and patterns based on the text input. A hash function takes produces some output for a given input. More importantly, the output is always the same (deterministic) for a given input and it is hard to infer the input from the output. These characteristics make hash functions extremely vital, in the context of information security, because they ensure the integrity of a payload.
For the purpose of this library, hash functions are a great way to generate the same colors (hex), coordinates and dimensions for a given text input. In other words, rothko-js uses hash functions to
convert text-inputs, like the title of your blog, into a unique and deterministic graphical representations.
- This tool is inspired by Ruby Chen, a designer at OpenAI. You can find the works that inspired this tool on OpenAI's blogs.
- The name of this tool is inspired by Mark Rothko, a painter who is best known for his abstract expressionist paintings which this tool tries to emulate.
- The implementation of this tool is based on the open-source implementation of vue-sonner