VanisherJSFade out by deadline

Quick Examples ​

Basic Usage ​

<div id="vanisher-element">This element will fade out by the deadline</div>

import { createVanisher } from "vanisher";

const vanisher = createVanisher({
  deadline: "2025-01-01T23:59:59",
  targetElement: "#vanisher-element",
});

React Component ​

import { VanisherReactWrapper } from "vanisher/react";

function App() {
  return (
    <VanisherReactWrapper deadline="2025-01-01T23:59:59">
      <h1>This content will fade out by January 1st, 2025</h1>
    </VanisherReactWrapper>
  );
}

Next.js Component ​

import { VanisherNextWrapper } from "vanisher/next";

export default function Page() {
  return (
    <VanisherNextWrapper
      deadline="2025-01-01T23:59:59"
      fallback={<div>Content has expired</div>}
    >
      <h1>Next.js optimized fading content</h1>
    </VanisherNextWrapper>
  );
}

Why VanisherJS? ​

VanisherJS is a powerful JavaScript library that automatically fades out websites and elements based on time deadlines. It's designed to be simple to use while providing powerful customization options for various use cases.

Key Features ​

• Deadline-Based Fading: Set a deadline date, and VanisherJS automatically calculates and applies the appropriate opacity
• Lightweight & Fast: Zero dependencies, minimal bundle size, and optimized performance
• Framework Agnostic: Works with any framework or library, or no framework at all
• TypeScript Ready: Full type safety with comprehensive type definitions
• Universal Support: Browser, React, Next.js, and script tag compatibility
• Customizable: Fine-tune behavior with extensive configuration options

Use Cases ​

• Invoice Management: Fade out unpaid invoices after due dates
• Limited Offers: Gradually hide promotional content as expiration approaches
• Event Countdowns: Create urgency with fading event pages
• Trial Periods: Soften access to expiring trial features
• Seasonal Content: Automatically hide seasonal promotions
• Maintenance Windows: Prepare users for scheduled downtime

Package Exports ​

// Core functionality
import { createVanisher, Vanisher } from 'vanisher';

// React components
import { VanisherReactWrapper } from 'vanisher/react';

// Next.js components
import { VanisherNextWrapper } from 'vanisher/next';

// TypeScript types
import type { VanisherOptions, VanisherResult } from 'vanisher';

"VanisherJS: Fade out by deadline"