Startup Ideas Bank
Dependency-free text roll animation for vanilla JS, React, and Vue lacks a clear market pull.
AI roast score: 62/100 (C)
The idea
Danilaa1/slot-text — Dependency-free text roll animation for vanilla JS, React, and Vue.
slot-text
Dependency-free text roll animation for tiny, tactile UI labels.
📦 Install
npm install slot-text
🚀 Quick start
import "slot-text/style.css" ;
import { slotText , chromatic } from "slot-text" ;
const label = slotText ( document . querySelector ( "#copy" ) ! , "Copy" ) ;
// the classic Copy → Copied → Copy, in one call
label . flash ( "Copied" , { enter : { color : chromatic ( ) } } ) ;
That's it — import the CSS once, attach to an element, roll text.
🧩 API
Method
What it does
set(text, options?)
Roll to new text — the text stays
flash(text, options?)
Roll in, then auto-revert to the previous text
destroy()
Clean up
const label = slotText ( element , "Copy" , options ) ;
label . set ( "Copied" ) ; // permanent change
label . set ( "Copy" , { direction : "down" } ) ;
label . flash ( "Copied" ) ; // temporary — rolls back after 1.4s
label . destroy ( ) ;
💡 flash is spam-safe — repeat clicks restart the revert timer instead
of queuing extra rolls, and an explicit set() cancels any pending revert.
label . flash ( "Copied" , {
revertAfter : 1400 , // ms before rolling back
enter : { direction : "up" , color : chromatic ( ) } , // roll-in
exit : { direction : "down" } , // roll-back
} ) ;
⚛️ React
import "slot-text/style.css" ;
import { SlotText } from "slot-text/react" ;
import { chromatic } from "slot-text" ;
< SlotText
text = { copied ? "Copied" : "Copy" }
options = { { direction : copied ? "up" : "down" , color : copied ? chromatic ( ) : undefined } }
/>
💚 Vue
< script setup lang="ts">
import " slot-text/style.css " ;
import { SlotText } from " slot-text/vue " ;
</ script >
< template >
< SlotText text="Copied" : options = " { direction: ' up ' } " />
</ template >
🔷 Solid
import "slot-text/style.css" ;
import { createSignal } from "solid-js" ;
import { slotText } from "slot-text/solid" ;
const [ label , setLabel ] = createSignal ( "Copy" ) ;
< button aria-label = { label ( ) } onClick = { ( ) => setLabel ( "Copied" ) } >
< span use : slotText = { { text : label ( ) , options : { direction : "up" } } } />
</ button >
🧡 Svelte
< script lang = " ts " >
import " slot-text/style.css " ;
import { slotText } from " slot-text/svelte " ;
let label = " Copy " ;
</ script >
< button aria-label ={ label } on:click ={() => label = " Copied " }>
< span use:slotText ={{ text : label , options : { direction : " up " } }}></ span >
</ button >
⚙️ Options
Option
Default
Description
direction
"down"
Roll direction: "up" or "down"
stagger
45
Delay between characters (ms)
dura
The roast
Your dependency-free text roll animation might appeal to a niche group of developers, but the brutal truth is that flashy UI elements rarely justify a subscription model. The tech is neat, but you're building a feature, not a product. The harsh reality is without clear differentiation or a large enough market pull, you're likely to be an afterthought in a developer's toolkit. Furthermore, the current stage of your company being just an idea (q12=idea) without any funding (q14=no_funding) or team (q13=solo) makes your execution risks sky-high. The biggest unknown is whether anyone will actually pay for this (q15=will_pay), which is a massive red flag in a niche market.
Red flags
- q15=will_pay
- q12=idea
- q13=solo
Verdict
Cool tech does not equal a viable business; focus on proving people will actually pay for this.
Roast your own startup idea →