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

Dependency-free text roll animation for JavaScript frameworks? Cool tech, but who is actually paying for flashy labels?

In the founder's own words

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

Verdict

Cool tech does not equal a viable business; focus on proving people will actually pay for this.

Start with your own startup idea →

More ideas roasted by AI

Browse all startup ideas →