Louis's Graphics

Effort Slider

AI chats

About

A stepped effort slider whose brain thumb glides along a pink to violet track, then ignites a twinkling pixel galaxy with a starburst at max.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Effort Slider to your project and fits it to your theme.

Code

How Effort Slider is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import * as React from "react"
import { EffortSlider } from "@/components/ui/effort-slider"

export default function EffortSliderDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-neutral-950 p-8">
      <EffortSlider scale={1.6} />
    </div>
  )
}

More by Louis's Graphics

View all
  • Peak Chart

    Peak Chart

  • Liquid Chrome

    Liquid Chrome

  • Melt Mark

    Melt Mark

  • Glass Tabs

    Glass Tabs

  • Thinking Pill

    Thinking Pill

  • Metaball Loader

    Metaball Loader

  • Glow Button

    Glow Button

  • Orb Loader

    Orb Loader

More in AI chats

View all
  • AI Actions

    AI Actions

    330
  • Color Picker

    Color Picker

    138
  • AI Task List

    AI Task List

    173
  • Attachments

    Attachments

    26
  • Background Inbox

    Background Inbox

    31
  • Agent Chat

    Agent Chat

    18
  • Memory Scope

    Memory Scope

    3
  • Streaming Text

    Streaming Text

    18