GitHub CSS Weekly Trending Repositories

HackTricks-wiki/hacktricks

Welcome to the page where you will find each trick/technique/whatever I have learnt in CTFs, real life apps, and reading researches and news.

HackTricks

Hacktricks logos & motion design by @ppieranacho.

Run HackTricks Locally

# Download latest version of hacktricks
git clone https://github.com/HackTricks-wiki/hacktricks

# Select the language you want to use
export HT_LANG="master" # Leave master for English
# "af" for Afrikaans
# "de" for German
# "el" for Greek
# "es" for Spanish
# "fr" for French
# "hi" for HindiP
# "it" for Italian
# "ja" for Japanese
# "ko" for Korean
# "pl" for Polish
# "pt" for Portuguese
# "sr" for Serbian
# "sw" for Swahili
# "tr" for Turkish
# "uk" for Ukrainian
# "zh" for Chinese

# Run the docker container indicating the path to the hacktricks folder
docker run -d --rm --platform linux/amd64 -p 3337:3000 --name hacktricks -v $(pwd)/hacktricks:/app ghcr.io/hacktricks-wiki/hacktricks-cloud/translator-image bash -c "mkdir -p ~/.ssh && ssh-keyscan -H github.com >> ~/.ssh/known_hosts && cd /app && git config --global --add safe.directory /app && git checkout $HT_LANG && git pull && MDBOOK_PREPROCESSOR__HACKTRICKS__ENV=dev mdbook serve --hostname 0.0.0.0"

Your local copy of HackTricks will be available at http://localhost:3337 after <5 minutes (it needs to build the book, be patient).

Alternatively, if you have Docker Compose you can just run the following from the repo root:

docker compose up

This uses the bundled docker-compose.yml to serve the branch currently checked out on the host at http://localhost:3337 with live reload. To change languages when using Compose, check out the desired language branch before starting the service.

HackTricks Partners

HackTricks Friends

STM Cyber

STM Cyber provides penetration testing, security audits, exploit and research work, tools, and security-awareness services. Its site describes a team of penetration testers, programmers, and security researchers with more than a decade of experience.^[1]

You can check their blog at https://blog.stmcyber.com.

STM Cyber also support cybersecurity open source projects like HackTricks 😃

Intigriti

Intigriti is a crowdsourced security provider offering bug bounty and penetration-testing services through a global researcher community. Its platform combines continuous bug bounty coverage with on-demand PTaaS and managed vulnerability disclosure programs.^[2]

Bug bounty tip: Join Intigriti through https://go.intigriti.com/hacktricks and explore its bug bounty programs.

Modern Security – AI & Application Security Training Platform

Modern Security offers self-paced, hands-on AI security training for security engineers, AppSec professionals, and developers. Its AI Security Certification covers LLM and agent fundamentals, RAG and vector databases, threat modeling, prompt-injection and MCP attacks, and defensive architecture.^[3]

👉 More details on the AI Security course:
https://www.modernsecurity.io/courses/ai-security-certification

SerpApi

SerpApi provides APIs for Google and other search engines, returning structured SERP data with features such as location-aware results, Maps, Shopping, and Knowledge Graph results.^[4]

For more information, check out their blog, try an example in their playground, or create a free account.

8kSec Academy – In-Depth Mobile & AI Security Courses

8kSec Academy offers self-paced mobile and AI-security courses. Its catalog covers mobile application auditing and reversing with tools such as Ghidra, Frida, and LLDB, along with AI/LLM attack and defense labs.^[5][6]

Browse the 8kSec Academy course catalog.

NaxusAI – AI Powered Security Scanner

Naxus markets an offensive-AI platform that maps code and infrastructure, then uses static and dynamic agents to find and validate exploitable weaknesses with proof-of-concept evidence and remediation guidance.^[7]

Code security tip: Explore Naxus for code- and infrastructure-focused vulnerability discovery.

WebSec

WebSec provides penetration testing, security subscriptions, staffing, and vulnerability-assessment services. Its site says it operates internationally and covers offensive security, defensive security, and governance, risk, and compliance work.^[8]

For more information, visit their website or blog.

In addition to the above WebSec is also a committed supporter of HackTricks.

CyberHelmets

Built for the field. Built around you.
Cyber Helmets provides expert-led cybersecurity training with custom-built content and labs grounded in real infrastructures. Its programs are tailored to organizational needs and span assessment through implementation.^[9] For custom training inquiries, reach out here.

What sets their training apart:

Custom-built content and labs
Backed by top-tier tools and platforms
Designed and taught by practitioners

Last Tower Solutions

Last Tower Solutions focuses on cybersecurity consulting for Education and FinTech, including cloud assessments, internal and external penetration tests, vulnerability assessments, and compliance support.^[10]

Stay informed and up to date with the latest in cybersecurity by visiting our blog.

K8Studio - The Smarter GUI to Manage Kubernetes.

K8Studio is a desktop Kubernetes IDE with CloudMaps visualization, multi-cluster navigation, RBAC, Helm, logs, YAML, and terminal views. The vendor says it connects through kubeconfig without installing agents and supports macOS, Windows, Linux, and air-gapped clusters.^[11]

License & Disclaimer

See the HackTricks Values & FAQ entry in References below.

Github Stats

References

[1] STM Cyber
[2] Intigriti
[3] AI Security Certification – Modern Security
[4] SerpApi
[5] 8kSec Academy
[6] Practical AI Security: Attacks, Defenses, and Applications
[7] Naxus
[8] WebSec
[9] Cyber Helmets
[10] Last Tower Solutions
[11] K8Studio
[12] Intigriti HackTricks referral
[13] Modern Security
[14] WebSec sponsorship video
[15] Cyber Helmets courses
[16] HackTricks Values & FAQ

SAPTARSHI-coder/EaseMotion-css

Animation-first CSS framework with reusable UI components, modern effects, and zero dependencies. Lightweight, beginner-friendly, and open-source.

⚡ EaseMotion CSS

A zero-dependency, animation-first CSS framework for faster, more expressive UI.

EaseMotion CSS lets you build polished interfaces with readable class names such as ease-fade-in, ease-slide-up, and ease-hover-grow. No build step, no complex setup, and no need to memorize shorthand.

Important

📢 Maintainer Announcement & Contribution Guidelines (August 2026)

🔓 All Contributor Accounts Unbanned: All contributor soft-bans have been removed! Everyone is welcome to contribute.
⏱️ Daily Contribution Rate Limit: Maximum 100 PRs per day per contributor to maintain stability and review quality.
✨ 500 New Approved GSSoC Issues Available: 500 brand new approved issues (#59099 to #59610) are open for contribution!
📁 Submission Directory: All PRs MUST be submitted under submissions/examples/your-feature-name/ containing demo.html, style.css, and README.md.

Table of Contents 📑

🚀 Quick Setup

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
  rel="stylesheet"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/SAPTARSHI-coder/EaseMotion-css@main/easemotion.min.css"
/>

📖 Documentation · 🎮 Live Demo · 📦 npm · 🤝 Contributing

Controlling looping animations

Looping animations such as .ease-bounce, .ease-pulse, .ease-rotate, .ease-ping, and .ease-typewriter-loop use the CSS variable --ease-animation-iterations.

The default value is infinite, which keeps existing behavior unchanged. If you want a looping animation to run only a few times, set the variable once in your project:

:root {
  --ease-animation-iterations: 3;
}

This will apply the iteration count to all looping animation utilities by default.

Support the Project

If EaseMotion CSS saves you time or helps your learning journey, please consider supporting it.

Most people simply forget. This is your reminder. 😊

Action	Why it matters
💖 Sponsor on GitHub	Directly support the creator to keep the project active and stable
⭐ Star the repo	Helps more developers discover the project
🍴 Fork and contribute	Your idea could become a real framework class
🐞 Report an issue	Bugs you catch make it better for everyone
💡 Suggest a feature	Good ideas ship faster than you think

Stars cost nothing and mean everything to an independent open-source project. If this saved you even 10 minutes, it's worth a click.

Project Statistics

Metric	Value
📦 npm Package	`easemotion-css`
🌐 CDN	cdn.jsdelivr.net/gh/...
⚡ Classes	80+ utility classes, 20+ animation classes
🎨 Components	Buttons (6 variants), Cards (13 variants)
🔑 Design Tokens	60+ CSS custom properties
⚖️ Bundle Size	28.2 kB gzipped · 174.1 kB raw
📜 License	MIT
🔧 Build Step	❌ None required
🏗️ Dependencies	❌ Zero

Browser Compatibility

EaseMotion CSS is built for modern evergreen browsers and relies on CSS3 custom properties, CSS animations, Flexbox, CSS Grid, transforms, transitions, and keyframe animations.

| Browser | Minimum Version | backdrop-filter | aspect-ratio | CSS variables | Animations | Notes | | ------- | --------------- | ------------------------------------------------- | -------------- | ------------- | ---------- | --------- | --- | | Chrome | 49+ | Supported | Supported | Supported | Supported | | | Firefox | 31+ | Supported | Supported | Supported | Supported | | | Safari | 9.1+ | Supported with -webkit-backdrop-filter fallback | Supported | Supported | Supported | Supported | | | Edge | 15+ | Supported | Supported | Supported | Supported | | | Opera | 36+ | Supported | Supported | Supported | Supported | |

Internet Explorer (IE 11 and earlier) is not supported.

What is EaseMotion CSS?

EaseMotion CSS is a curated, animation-first CSS framework where class names read like plain English. It is designed for developers who want expressive motion and clean HTML without a build tool or complex configuration.

<div class="ease-center ease-fade-in">
  <h1 class="ease-slide-up ease-delay-100">Build faster.</h1>
  <p class="ease-slide-up ease-delay-200">Animation-first CSS for humans.</p>
  <button
    class="ease-btn ease-btn-primary ease-btn-pill ease-hover-grow ease-delay-300"
  >
    Get Started →
  </button>
</div>

Why it is easy to use

Readable utility names such as ease-center and ease-hover-grow
Zero dependency setup with CDN or npm
Ready-to-use motion, layout, and component helpers
Easy customization through CSS variables

Why EaseMotion CSS?

	Vanilla CSS	Tailwind CSS	EaseMotion CSS
Setup	Write from scratch	Build step + config	Link one file
Readability	✅ High	❌ Low (`px-4 flex gap-x-2`)	✅ High (`ease-center`)
Animations	⚙️ Manual	🔸 Minimal	✅ First-class
Zero config	✅	❌	✅
Quality control	You	You	✅ Curated by maintainer
CDN ready	N/A	❌	✅ Yes
Learning curve	High	Medium	✅ Near zero

Quick Start

Option 1 — CDN (fastest, zero setup, recommended)

<!DOCTYPE html>
<html>
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/SAPTARSHI-coder/EaseMotion-css@main/easemotion.min.css"
    />
  </head>
  <body>
    <div class="ease-center ease-fade-in">
      <h1>Hello, EaseMotion!</h1>
    </div>
  </body>
</html>

Powered by jsDelivr — globally cached, always fast, no account needed. The CDN link is live the moment you paste it.

Alternative CDN Providers

EaseMotion CSS can also be loaded using alternative CDN providers.

jsDelivr (recommended)

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/SAPTARSHI-coder/EaseMotion-css@main/easemotion.min.css"
/>

unpkg

<link
  rel="stylesheet"
  href="https://unpkg.com/easemotion-css/easemotion.min.css"
/>

GitHub Raw CDN

<link
  rel="stylesheet"
  href="https://raw.githubusercontent.com/SAPTARSHI-coder/EaseMotion-css/main/easemotion.min.css"
/>

jsDelivr is recommended for production usage because it provides global caching and better reliability.

Option 2 — npm

npm install easemotion-css

Then in your HTML:

<link rel="stylesheet" href="node_modules/easemotion-css/easemotion.min.css" />

Or in CSS / PostCSS / Sass:

@import "easemotion-css/easemotion.min.css";

Option 3 — Granular imports (pick only what you need)

<!-- Font (optional — for Inter typography) -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
  rel="stylesheet"
/>

<!-- Core (always required — load in this exact order) -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/easemotion-css/core/variables.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/easemotion-css/core/base.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/easemotion-css/core/animations.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/easemotion-css/core/utilities.css"
/>

<!-- Components — add only what you use -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/easemotion-css/components/buttons.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/easemotion-css/components/cards.css"
/>

Option 4 — Modular animation imports (load only what you need)

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion/variables.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion/fade.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion/slide.css"
/>
<!-- Add only the animation categories you need -->

Full bundle

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion/all.css"
/>

⚠️ easemotion/variables.css must always load before modular animation files. It provides the shared custom properties used by all animation categories.

Framework Integration

EaseMotion CSS is a pure CSS library — it works out of the box with every JavaScript framework by simply importing the stylesheet and applying class names to elements. Additionally, we ship a dedicated React integration layer to make animations even more declarative in JSX.

React + Vite

1. Install EaseMotion CSS

npm install easemotion-css

2. Import in your entry file

// main.jsx or App.jsx
import 'easemotion-css/easemotion.min.css';

3. Use classes directly in JSX

export default function HeroSection() {
  return (
    <div className="ease-center ease-fade-in">
      <h1 className="ease-slide-up ease-delay-100">Build faster.</h1>
      <p className="ease-slide-up ease-delay-200">Animation-first CSS for humans.</p>
      <button className="ease-btn ease-btn-primary ease-hover-grow ease-delay-300">
        Get Started →
      </button>
    </div>
  );
}

4. Use the `<Animate>` wrapper component (optional — in `examples/react-vite/`)

We ship a React wrapper component that turns animation settings into declarative props:

// Copy Animate.jsx from examples/react-vite/src/components/Animate.jsx
import Animate from './components/Animate';

export default function App() {
  return (
    <>
      {/* Fade in with a 200ms delay */}
      <Animate type="fade-in" delay={200}>
        <div className="ease-card">Hello World</div>
      </Animate>

      {/* Staggered list items */}
      {['A', 'B', 'C'].map((item, i) => (
        <Animate key={item} type="slide-up" delay={i * 100} hover="lift">
          <div className="ease-card">{item}</div>
        </Animate>
      ))}

      {/* Animate on mount (React remounts = re-animates) */}
      <Animate key={isOpen ? 'open' : 'closed'} type="zoom-in" duration={300}>
        {isOpen && <Modal />}
      </Animate>
    </>
  );
}

<Animate> Props Reference:

Prop	Type	Default	Description
`type`	`string`	—	EaseMotion animation name (e.g. `'fade-in'`, `'slide-up'`, `'zoom-in'`)
`duration`	`'fast' \| 'medium' \| 'slow' \| number`	`'medium'`	Duration keyword or milliseconds
`delay`	`number`	`0`	Delay in ms before animation starts
`hover`	`string`	—	Hover effect class (e.g. `'lift'`, `'glow'`, `'scale'`)
`tag`	`string`	`'div'`	HTML tag to render
`className`	`string`	`''`	Additional CSS classes

5. Run the showcase

The full interactive playground lives in examples/react-vite/. Clone the repo and run:

cd examples/react-vite
npm install
npm run dev

This opens a dark-mode dashboard with live animation controls, staggered demos, and a modal transition showcase.

Next.js

EaseMotion CSS is fully compatible with Next.js (App Router and Pages Router) since it is a static CSS file with no JavaScript dependencies.

App Router (Next.js 13+)

// app/layout.js — import once globally
import 'easemotion-css/easemotion.min.css';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

// app/page.js — use class names in Server Components
export default function Page() {
  return (
    <main className="ease-center ease-fade-in">
      <h1 className="ease-slide-up">Welcome</h1>
    </main>
  );
}

Pages Router (Next.js 12 or earlier)

// pages/_app.js
import 'easemotion-css/easemotion.min.css';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Tip: EaseMotion CSS works in Server Components ('use server') without any hydration issues since it adds no runtime JavaScript.

Vue / Svelte / Astro

Install via npm and import globally:

npm install easemotion-css

Vue 3

// main.js
import 'easemotion-css/easemotion.min.css';

<!-- MyComponent.vue -->
<template>
  <div class="ease-fade-in ease-card">
    <h2 class="ease-slide-up ease-delay-100">Hello Vue!</h2>
  </div>
</template>

Svelte / SvelteKit

// src/app.js or +layout.svelte <script>
import 'easemotion-css/easemotion.min.css';

<div class="ease-fade-in ease-card">
  <h2 class="ease-slide-up ease-delay-100">Hello Svelte!</h2>
</div>

Astro

// src/layouts/Layout.astro
import 'easemotion-css/easemotion.min.css';

Or via a <link> tag in the Astro layout:

<link rel="stylesheet" href="/node_modules/easemotion-css/easemotion.min.css" />

SCSS Integration

EaseMotion CSS ships a SCSS layer under scss/ that exposes animation tokens as SCSS variables and provides reusable mixins. This allows you to apply EaseMotion animations in your own SCSS stylesheets without adding extra classes to your HTML.

Setup

Make sure you have Sass installed:

npm install --save-dev sass

Then import the SCSS package in your stylesheet:

// In your SCSS entry file
@use 'easemotion-css/scss' as ease;

Or import individual partials:

@use 'easemotion-css/scss/variables' as *;
@use 'easemotion-css/scss/mixins' as ease;

Using the `animate()` mixin

.my-card {
  // Apply fade-in with a 400ms duration and 200ms delay
  @include ease.animate(ease-kf-fade-in, 400ms, $ease-in-out-cubic, 200ms);
}

.hero-title {
  // Use shorthand named mixins
  @include ease.slide-up($duration: 600ms, $delay: 100ms);
}

.cta-button {
  @include ease.zoom-in($duration: $speed-fast);
}

Using the `transition()` mixin

.nav-item {
  @include ease.transition(color, $duration: $speed-fast, $easing: $ease-out-cubic);

  &:hover {
    color: var(--ease-color-primary);
  }
}

Available SCSS Tokens

Duration Tokens (mapped to CSS custom properties):

SCSS Variable	CSS Variable	Value
`$speed-fast`	`--ease-speed-fast`	CSS var
`$speed-medium`	`--ease-speed-medium`	CSS var
`$speed-slow`	`--ease-speed-slow`	CSS var

Easing Tokens:

SCSS Variable	Value
`$ease-ease`	`cubic-bezier(0.4, 0, 0.2, 1)`
`$ease-bounce`	`cubic-bezier(0.34, 1.56, 0.64, 1)`
`$ease-in-out`	`cubic-bezier(0, 0, 0.2, 1)`
`$ease-elastic`	Same as `$ease-bounce`

Available SCSS Mixins

Mixin	Description
`animate($name, $duration, $easing, $delay, $fill, $iteration)`	Base animation mixin
`transition($property, $duration, $easing, $delay)`	CSS transition helper
`fade-in(...)`	Applies `ease-kf-fade-in` animation
`fade-out(...)`	Applies `ease-kf-fade-out` animation
`slide-up(...)`	Applies `ease-kf-slide-up` animation
`slide-down(...)`	Applies `ease-kf-slide-down` animation
`zoom-in(...)`	Applies `ease-kf-zoom-in` animation
`zoom-out(...)`	Applies `ease-kf-zoom-out` animation

Build your SCSS

# Compile to CSS
npx sass scss/_index.scss dist/easemotion.scss.css

# Or use the npm script in the EaseMotion project
npm run build:scss

Contributing SCSS issues: We have 100+ open GSSoC-26 issues for expanding the SCSS layer — from new mixins to modular per-animation partials. Browse label:scss to find one.

Philosophy

EaseMotion CSS is not just a CSS library — it is a design language.

"If you can say it in English, you should be able to write it as a class."

<!-- Center this -->
<div class="ease-center">
  <!-- Fade this in -->
  <h1 class="ease-fade-in">
    <!-- Make it grow on hover --><button class="ease-hover-grow">
      <!-- Slide up with delay -->
      <p class="ease-slide-up ease-delay-200"></p>
    </button>
  </h1>
</div>

No documentation lookup required. The class name is the documentation.

Four principles that never get broken

Principle	What it means
Human-readable	Class names describe behavior in plain English
Animation-first	Motion is a first-class citizen, not an afterthought
Composable	Stack any classes freely — no specificity wars, ever
Curated	Every single class is maintainer-reviewed before release

How the curation pipeline works

1. Contributors submit raw HTML + CSS
         ↓
2. Maintainer reviews and evaluates fit
         ↓
3. Code is converted into EaseMotion CSS format
   (ease-* naming · CSS variables · accessibility)
         ↓
4. Integrated into core/ or components/
         ↓
5. Released, documented, and credited

Every class in the framework has passed through this process. The curation is what makes EaseMotion CSS consistent.

Usage and Examples

Development

Use the non-minified version for debugging and development:

<link rel="stylesheet" href="easemotion.css" />

### Animations

```html
<!-- Entrance animations (run on page load) -->
<h1 class="ease-fade-in">Fade in</h1>
<h2 class="ease-slide-up">Slide up</h2>
<h3 class="ease-slide-in-left">Slide left</h3>
<h4 class="ease-slide-in-right">Slide right</h4>
<h5 class="ease-zoom-in">Zoom in</h5>
<h6 class="ease-flip">3D flip</h6>

<!-- Staggered sequence — each item starts 100ms later -->
<div class="ease-slide-up ease-delay-100">First</div>
<div class="ease-slide-up ease-delay-200">Second</div>
<div class="ease-slide-up ease-delay-300">Third</div>

Duration Helpers

<div class="ease-slide-up ease-duration-fast">Fast animation</div>
<div class="ease-slide-up ease-duration-slow">Slow animation</div>

Class	Duration
ease-duration-fast	150ms
ease-duration-medium	300ms
ease-duration-slow	600ms

Bouncing

Pulsing

Rotating

Ping

You can customize the iteration count of looping animations:

:root {
  --ease-animation-iterations: 3;
}

By default, the value is infinite, preserving existing behavior.

Scroll-Triggered Animations (Ease Reveal)

To use .ease-reveal and have elements animate when scrolled into view, you must also include the reveal.js script in your HTML:

<!-- Add this before closing </body> tag -->
<script src="https://cdn.jsdelivr.net/npm/easemotion-css/core/reveal.js"></script>

Then simply add .ease-reveal along with an animation class:

<div class="ease-reveal ease-slide-up">
  This animates when scrolled into view!
</div>

Hover Effects

<button class="ease-hover-grow">Scales up on hover</button>
<div class="ease-hover-morph-card">Morph</div>
<div class="ease-hover-glow">Primary color glow</div>
<div class="ease-hover-lift">Lifts with shadow</div>
<div class="ease-hover-shimmer">Shimmer sweep effect</div>
<a class="ease-hover-underline">Animated underline</a>
<span class="ease-hover-bounce-text">Bounce!</span>

Applies a quick squish animation during hover, focus, and active interactions.

Layout Utilities

<!-- Centering (the most-used utility) -->
<div class="ease-center">Perfectly centered</div>

<!-- Flexbox -->
<div class="ease-flex ease-justify-between ease-items-center ease-gap-4">
  <span>Left</span>
  <span class="ease-self-end">Right</span>
</div>

<!-- Flex wrap utilities -->
<div class="ease-flex ease-flex-wrap ease-gap-3">Wrap</div>
<div class="ease-flex ease-flex-nowrap ease-gap-3">No wrap</div>
<div class="ease-flex ease-flex-wrap-reverse ease-gap-3">Reverse wrap</div>

<!-- Align self utilities -->
<div class="ease-flex ease-items-stretch ease-gap-3">
  <span class="ease-self-start">Start</span>
  <span class="ease-self-center">Center</span>
  <span class="ease-self-end">End</span>
  <span class="ease-self-stretch">Stretch</span>
</div>

<!-- Responsive auto-fit grid (no media queries needed) -->
<div class="ease-grid ease-grid-auto ease-gap-6">
  <div class="ease-card">Card 1</div>
  <div class="ease-card">Card 2</div>
  <div class="ease-card">Card 3</div>
</div>

<!-- Grid placement utilities -->
<div class="ease-grid ease-grid-cols-4 ease-place-center ease-gap-4">
  <div class="ease-col-span-2">Centered span 2</div>
  <div class="ease-col-span-1">Span 1</div>
  <div class="ease-col-span-1">Span 1</div>
</div>
<div class="ease-grid ease-grid-cols-3 ease-place-start ease-gap-4">Start</div>
<div class="ease-grid ease-grid-cols-3 ease-place-end ease-gap-4">End</div>

Align Self Utilities

<div class="ease-flex">
  <div class="ease-self-start">Start</div>
  <div class="ease-self-center">Center</div>
  <div class="ease-self-end">End</div>
  <div class="ease-self-stretch">Stretch</div>
</div>

Available Classes

.ease-self-start → align-self: flex-start
.ease-self-center → align-self: center
.ease-self-end → align-self: flex-end
.ease-self-stretch → align-self: stretch

Hover Animation Examples

Common hover-triggered animation examples are available for:

Buttons
Cards
Images

Example showcase:

hover-animation-showcase
hover-sweep

Buttons

<!-- Variants -->
<button class="ease-btn ease-btn-primary">Primary</button>
<button class="ease-btn ease-btn-success">Success</button>
<button class="ease-btn ease-btn-danger">Danger</button>
<button class="ease-btn ease-btn-outline">Outline</button>
<button class="ease-btn ease-btn-ghost">Ghost</button>

<!-- With hover animation -->
<button class="ease-btn ease-btn-primary ease-btn-hover">Animated</button>

<!-- With squish button -->
<button class="ease-btn ease-btn-primary ease-squish-button">Squish Me</button>

<!-- Sizes + shapes -->
<button class="ease-btn ease-btn-primary ease-btn-sm">Small</button>
<button class="ease-btn ease-btn-primary ease-btn-lg ease-btn-pill">
  Large Pill
</button>

Cards

<!-- Hover card with shadow -->
<div class="ease-card ease-card-shadow ease-card-hover">
  <div class="ease-card-header">
    <h3 class="ease-card-title">Title</h3>
  </div>
  <div class="ease-card-body"><p>Content goes here.</p></div>
  <div class="ease-card-footer">
    <button class="ease-btn ease-btn-primary ease-btn-sm">Action</button>
  </div>
</div>

<!-- Glassmorphism -->
<div class="ease-card ease-card-glass">Glass card</div>

<!-- Neumorphic -->
<div class="ease-card ease-card-neumorphic">Soft UI card</div>

<!-- Accent border -->
<div class="ease-card ease-card-accent">Highlighted card</div>

Navigation

<nav class="ease-navbar-glass" aria-label="Primary navigation">
  <div class="ease-navbar-brand">EaseMotion</div>
  <div class="ease-navbar-menu">
    <a class="ease-navbar-item" href="#">Home</a>
    <a class="ease-navbar-item" href="#">Features</a>
    <a class="ease-navbar-item" href="#">Contact</a>
  </div>
</nav>

<nav
  class="ease-navbar-glass ease-navbar-glass-sticky"
  aria-label="Sticky navigation"
>
  <div class="ease-navbar-brand">Sticky Nav</div>
  <div class="ease-navbar-menu">
    <a class="ease-navbar-item" href="#">Overview</a>
    <a class="ease-navbar-item" href="#">Docs</a>
  </div>
</nav>

<nav
  class="ease-navbar-glass ease-navbar-glass-blur"
  aria-label="Blurred navbar"
>
  <div class="ease-navbar-brand">Deep Blur</div>
  <div class="ease-navbar-menu">
    <a class="ease-navbar-item" href="#">Product</a>
    <a class="ease-navbar-item" href="#">Support</a>
  </div>
</nav>

Build a Hero Section in 5 Lines

<section class="ease-center ease-padding-16">
  <h1 class="ease-fade-in">Build faster.</h1>
  <p class="ease-slide-up ease-delay-200">Animation-first CSS for humans.</p>
  <button
    class="ease-btn ease-btn-primary ease-btn-lg ease-btn-pill ease-hover-grow ease-delay-300"
  >
    Get Started →
  </button>
</section>

Customization

Override any CSS custom property to theme the entire framework — no Sass, no PostCSS, just CSS:

:root {
  /* Colors */
  --ease-color-primary: #f97316; /* swap to orange  */
  --ease-color-success: #10b981; /* teal green      */

  /* Motion */
  --ease-speed-fast: 100ms; /* snappier        */
  --ease-speed-medium: 400ms; /* slightly slower */
  --ease-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Shape */
  --ease-radius-md: 1rem; /* rounder corners */
  --ease-radius-full: 9999px;

  /* Shadows */
  --ease-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.15);
}

Override framework styles with `@layer`

EaseMotion wraps all its CSS behind @layer cascade layers. Your own styles always win — even if the framework loads after your stylesheet:

/* Your custom overrides — always takes priority */
@layer easemotion.components {
  .ease-btn-primary {
    background: var(--ease-color-orange);
    border-radius: 2rem;
  }
}

No !important needed.

FAQ

How does EaseMotion CSS differ from Tailwind?

Tailwind is a utility-first framework built around short atomic class names and usually fits best in a build-driven workflow. EaseMotion CSS focuses on human-readable class names like ease-center and ease-fade-in, treats animation as a first-class feature, and is designed to work immediately by linking a stylesheet.

Can I use it with React/Vue?

Yes. EaseMotion CSS works with any framework that renders standard HTML class attributes — React, Vue, Svelte, Angular, Astro, Next.js, and more. Install from npm, import the stylesheet, and use the class names directly in your components. We also ship a dedicated React <Animate> wrapper component in examples/react-vite/ — see the Framework Integration section for details.

How do I submit a new component or utility?

Open or claim an issue first, then submit your work under the appropriate track directory in submissions/ (e.g., submissions/examples/ for HTML/CSS, submissions/react/ for React components, submissions/scss/ for SCSS mixins/tokens, or submissions/docs/ for core bug fixes & docs showcases). The maintainer reviews your submission, standardizes names/tokens, and integrates it into the core framework.

Does it work without a build step?

Yes. That is one of the core goals of EaseMotion CSS. You can use the CDN link or local CSS files directly without configuring a bundler, compiler, or build pipeline.

File Structure

easemotion-css/
├── easemotion.css              ← readable source entry point
├── easemotion.min.css          ← bundled production build
│
├── core/                       ← MAINTAINER-ONLY
│   ├── variables.css           ← 60+ design tokens
│   ├── base.css                ← reset + typography (Inter font)
│   ├── animations.css          ← 20+ animation classes
│   └── utilities.css           ← 80+ layout utilities
│
├── components/                 ← MAINTAINER-ONLY
│   ├── buttons.css             ← 6 variants, 4 sizes, pill, icon
│   └── cards.css               ← 13 card variants
│
├── scss/                       ← SCSS INTEGRATION LAYER
│   ├── _index.scss             ← entry point (@forward variables + mixins)
│   ├── _variables.scss         ← SCSS animation tokens ($speed-*, $ease-*)
│   └── _mixins.scss            ← reusable SCSS mixins (animate, hover-effect...)
│
├── examples/                   ← INTEGRATION SHOWCASES
│   ├── demo.html               ← source interactive showcase
│   ├── react-vite/             ← ⚛️ React + Vite integration showcase
│   │   ├── src/
│   │   │   ├── App.jsx         ← interactive animation playground
│   │   │   ├── App.css         ← dark-mode dashboard styles
│   │   │   └── components/
│   │   │       └── Animate.jsx ← <Animate> React wrapper component
│   │   └── package.json
│   └── ...
│
├── docs/demo.html              ← deployed live demo page
├── docs/index.html             ← full documentation site
│
├── submissions/                ← CONTRIBUTOR AREA
│   ├── README.md               ← full submission workflow
│   └── examples/
│       ├── hover-grow/         ← [INTEGRATED] → ease-hover-grow
│       ├── hover-shimmer/      ← [INTEGRATED] → ease-hover-shimmer
│       ├── card-lift/          ← [INTEGRATED] → ease-card-lift
│       └── button-glow/        ← pending review
│
├── .github/
│   ├── CODEOWNERS
│   ├── ISSUE_TEMPLATE/
│   │   ├── feature_request.md
│   │   └── bug_report.md
│   └── PULL_REQUEST_TEMPLATE.md
│
├── VISION.md                   ← long-term project direction
├── CHANGELOG.md                ← full release history
├── CONTRIBUTING.md             ← contribution guide
├── LICENSE                     ← MIT © 2026 Saptarshi Sadhu
└── README.md

Roadmap

Track progress and vote on features via GitHub Issues.

Feature	Status
✅ Human-readable core utilities (80+)	Shipped — v1.0
✅ Animation-first motion library (20+)	Shipped — v1.0
✅ Curated contribution pipeline	Shipped — v1.0
✅ Component library (buttons, cards)	Shipped — v1.0
✅ npm package + jsDelivr CDN	Shipped — v1.0
✅ Full documentation site	Shipped — v1.0
✅ React + Vite integration showcase	Shipped — v1.1
✅ SCSS token layer (variables + mixins)	Shipped — v1.1
🚧 React component library (hooks + wrappers)	In Progress — v1.1
🚧 SCSS modular partials (per-animation modules)	In Progress — v1.1
🚧 Next.js App Router template	In Progress — v1.1
🔜 Form components (inputs, checkboxes, toggles)	Planned — v1.2
🔜 Dark mode token layer	Planned — v1.2
🔜 Modal & tooltip components	Planned — v1.2
🔜 Scroll-triggered animations (IntersectionObserver)	Planned — v1.2
🔜 Navigation components (navbar, sidebar)	Planned — v1.3
🔜 CSS-only accordion & tabs	Planned — v1.3
🔜 Badge, tag, avatar, progress bar	Planned — v1.3
🔜 Theming CLI (generate custom token file)	Exploring

Contributing

EaseMotion CSS is a curated, maintainer-reviewed framework. Contributors submit raw ideas — the maintainer handles standardization, naming, and integration.

✅ What contributors do

✅ Place submissions inside the correct track folder (submissions/examples/, submissions/react/, submissions/scss/, or submissions/docs/)
✅ Include all required files (e.g. JSX + README for React, SCSS + README for SCSS, or HTML + CSS + README for Standard)
✅ Follow the suffix naming rule (e.g. ease-component-yourid) to avoid name collisions
✅ Squash commits to keep the repository history clean
✅ One feature/component per PR

❌ What contributors do NOT do

❌ Edit core/           → PR closed without review
❌ Edit components/     → PR closed without review
❌ Merge their own PRs  → Maintainer-only
❌ Claim more than 2 active issues at once

The submission pipeline

Your raw CSS  →  Maintainer standardizes  →  ease-* class ships
.hover-grow       ease-hover-grow              core/animations.css

🌟 Why contribute?

Beginner-friendly — write raw CSS, no conventions to memorize
Learn real system design — see how raw ideas become a coherent API
Your idea ships — accepted submissions become real framework classes
Credited in CHANGELOG — your contribution is documented permanently
Your name in the README — see the contributor wall below

📖 Read the full guide → CONTRIBUTING.md

📢 Contribution Rate Limit Update

To maintain repository stability, review quality, and fair contribution distribution, EaseMotion CSS is introducing a soft contribution limit:

Contributors may submit up to 25 PRs per day
Focus on quality, originality, accessibility, and proper testing
Low-effort, repetitive, or mass-generated PRs may be closed without review

Why This Change?

EaseMotion CSS has grown rapidly with hundreds of contributors and thousands of merged PRs. This update helps:

Reduce merge conflicts
Improve review quality
Maintain framework consistency
Encourage meaningful contributions over quantity

🧹 Clean Commit History & Squashing

To keep the repository's git history clean and readable, contributors must follow these rules:

Squash your commits: Ensure all commits in your Pull Request are squashed into a single meaningful commit (or a few logical commits) before submitting for review. Do not push dozens of micro-commits (e.g., "fix", "typo", "update style.css", etc.) for a single change.
Keep history clean: PRs containing noisy, repetitive, or excessive commit histories (e.g., dozens of micro-commits) may be closed without review or blocked from merging.
Write clear commit messages: Use descriptive commit messages following the Conventional Commits format (e.g., feat: add card component or fix: resolve hover animation issue).

📢 Contribution Policy Update

All contributions are welcome and eligible for merge when submitted inside the correct track folder under the submissions/ directory following the repository guidelines.

To avoid naming conflicts and overlapping implementations, contributors must append a short unique identifier or abbreviation to their feature/component/mixin name.

Example:

ease-hover-sap
ease-tabs-ak
ease-card-pr

This ensures:

Unambiguous component naming,
Preservation of every contributor’s work,
Conflict-free merges,
Easier maintenance and review workflow,
Support for parallel implementations of similar ideas.

The project encourages creative variations and parallel implementations rather than overwriting existing contributor work.

Issue Labels 🏷️

Label	Used for
`good first issue`	Easy entry points, perfect for first-time contributors
`animation`	Hover effects, entrance animations, keyframe ideas
`component`	New UI components (modals, tooltips, badges, etc.)
`enhancement`	Improvements to existing classes
`documentation`	README, docs site, submission guide
`curated`	Accepted into the framework
`maintainer-approved`	Reviewed, pending integration
`featured`	Exceptional submission — will be showcased

Issue Cooldown Rule: Maximum 2 active assigned issues per contributor. Issues with no progress for 24 hours (1 day) are unassigned and reopened.

Community

Platform	Link
🐛 Bug Reports	Open an issue
💡 Feature Requests	Request a feature
🔀 Pull Requests	Submit a contribution
📖 Documentation	Full docs site
📦 npm Package	easemotion-css on npm
🌐 CDN	jsDelivr (GitHub CDN)
🏆 GSSoC 2026	GirlScript Summer of Code
💬 Discord Server (Optional)	Join Discord (Optional)

⭐ If EaseMotion CSS saves you time, consider starring the repo. It helps more developers discover the project and motivates continued development.

Contributors

Everyone who has submitted a PR, opened an issue, or contributed an idea. This wall regenerates automatically on every push to main.

641 Contributors

_{SAPTARSHI-coder} _{39815 commits}	_{tmdeveloper007} _{1843 commits}	_ionfwsrijan _{1492 commits}	_hrx01-dev _{1478 commits}	_{Avinash-sdbegin} _{1297 commits}	_{srujana-manda} _{1264 commits}	_sanrishi _{1174 commits}	_Stewartsson _{1062 commits}	_harrshita123 _{1000 commits}	_{KaparthyReddy} _{921 commits}	_sahare77 _{780 commits}	_Aryan0819 _{754 commits}
_{realtushartyagi} _{746 commits}	_{openhands-agent} _{653 commits}	_nyxsky404 _{652 commits}	_Anexus5919 _{646 commits}	_{richachauhan15} _{628 commits}	_{22oo1cso56mansoorkhan-cell} _{604 commits}	_kunal-9090 _{551 commits}	_{scriptedbyshivam} _{546 commits}	_nazneen-p1 _{538 commits}	_Dharm3112 _{451 commits}	_kavin553 _{438 commits}	_{thakurakanksha288} _{368 commits}
_Xenon010101 _{344 commits}	_{vmdivyareddy18} _{314 commits}	_{sonusharma6-dsa} _{311 commits}	_{Pratyush-Panda-2006} _{297 commits}	_{Yashaswini-K-P} _{279 commits}	_{ARPANPATRA111} _{276 commits}	_aaniya22 _{275 commits}	_suman20041 _{274 commits}	_{saidai-bhuvanesh} _{261 commits}	_itssagarK _{259 commits}	_ash1shkumar _{244 commits}	_advikdivekar _{236 commits}
_{pisum-sativum} _{231 commits}	_akhilmodi29 _{223 commits}	_{adarsh-gautam-sys} _{219 commits}	_Viidhii19 _{198 commits}	_palak-here _{193 commits}	_{Tomeshwari-02} _{186 commits}	_Payal430 _{184 commits}	_AnzalKhan16 _{182 commits}	_jainiksha _{179 commits}	_{eranmol2007-coder} _{176 commits}	_Anushreer22 _{169 commits}	_WHENKEY2007 _{164 commits}
_Babin123456 _{158 commits}	_{SydneyPresscott} _{157 commits}	_itsdakshjain _{156 commits}	_ashroxy _{139 commits}	_shabnam311 _{133 commits}	_Rashi1404 _{130 commits}	_avanibapna06 _{125 commits}	_{nancy-verma780} _{119 commits}	_bhaikd _{117 commits}	_Hasini2706 _{117 commits}	_sudha09-git _{115 commits}	_pradeep0153 _{111 commits}
_TanCodeX _{109 commits}	_just-tanvi _{103 commits}	_shahabhilash _{101 commits}	_Vidheendu _{100 commits}	_pari-dubey1 _{98 commits}	_{iammissmiller} _{97 commits}	_{BhakktiGautam} _{96 commits}	_{prerendrarahitya1708} _{94 commits}	_{Prateek2007-cmd} _{94 commits}	_{IshwinderKaur8} _{91 commits}	_CourageAyim _{91 commits}	_{desireddymohithreddy0925} _{88 commits}
_{ankitasahu83964} _{88 commits}	_{karishmaram-tech} _{88 commits}	_Abfa41 _{87 commits}	_{panditshubham766-dotcom} _{85 commits}	_ArshVermaGit _{84 commits}	_Nicks-19 _{84 commits}	_broskell _{83 commits}	_{shahabuddinwebdev} _{82 commits}	_{jjoshuamiracle7057} _{81 commits}	_ishita526 _{80 commits}	_pari-28 _{78 commits}	_Abhay-1704 _{78 commits}
_{Rajlakshmi-ai} _{77 commits}	_Aditya8369 _{77 commits}	_Kadaliswarna _{76 commits}	_{vaishnavi-212} _{75 commits}	_dreynox _{75 commits}	_{aparna24bce11388} _{73 commits}	_CoderMS07 _{73 commits}	_{kanishka-2007-tech} _{73 commits}	_{TavishaBudhiraja} _{73 commits}	_{dnyaneshwari44} _{73 commits}	_{ZainabTravadi} _{72 commits}	_{shresthbhargava} _{72 commits}
_{silentguyracer} _{70 commits}	_{SathvikaSingoti} _{68 commits}	_JAY4IGNITE _{67 commits}	_{Kokila-chandrakar} _{66 commits}	_KRITIKA-l _{66 commits}	_{codedbydollys10} _{65 commits}	_ayushsri-dev _{63 commits}	_Shreeya1207 _{62 commits}	_{geetanunakani} _{61 commits}	_Ru-2008 _{61 commits}	_poorvanshi10 _{55 commits}	_hruthika18 _{54 commits}
_Ayontikapal _{54 commits}	_HarShada8G _{53 commits}	_{chavanGaneshDatta} _{53 commits}	_{savniagrawal1701} _{47 commits}	_{sricharan-213} _{47 commits}	_Aditya948351 _{47 commits}	_mittalsonal _{47 commits}	_{Aryan-Agarwal-creator} _{46 commits}	_ArchiGajera _{46 commits}	_{Ishita-Katiyar-06} _{46 commits}	_Daksh7785 _{44 commits}	_Man1ac-1773 _{44 commits}
_swarupio _{43 commits}	_Aakif-Kohari _{43 commits}	_atharv96k _{43 commits}	_samrin1502 _{42 commits}	_{Kanneboinashivakumar} _{42 commits}	_{Bheemeswari497} _{40 commits}	_yoogrammer _{40 commits}	_{AnanyaTiwari850} _{39 commits}	_Archana7224 _{39 commits}	_Sahitya0805 _{38 commits}	_{anishagarg327} _{38 commits}	_GOKULRAM-K _{38 commits}
_{parnita-Singh} _{37 commits}	_{GeethaBurigalla} _{36 commits}	_{rpoojaa06-git} _{36 commits}	_Subhash21022 _{36 commits}	_amna-sehgal _{36 commits}	_{Vaishnavi10706} _{36 commits}	_Ishika-1110 _{36 commits}	_{karrisanthoshigayatri} _{35 commits}	_REHAN-503 _{35 commits}	_{deepsikha-dash} _{35 commits}	_{vbarik317-droid} _{35 commits}	_kaur-jass _{35 commits}
_ujwal-224 _{34 commits}	_Pr241singh _{34 commits}	_{SatyamxBuilds} _{33 commits}	_{DivyaShreeS09} _{32 commits}	_shrutig-blip _{32 commits}	_cursoragent _{32 commits}	_{varshitha980-vvc} _{31 commits}	_Muskankr _{31 commits}	_{Yogender-verma} _{31 commits}	_aditya-5224 _{31 commits}	_{Akshit-Tyagi-05} _{31 commits}	_{srinidhi-2006-bit} _{31 commits}
_adrika4 _{30 commits}	_{KeerthiSreeja05} _{30 commits}	_{tanishka-kuwar} _{29 commits}	_{AyushPrad2907} _{29 commits}	_Dev1822 _{29 commits}	_{gargshambhavi0802-pixel} _{28 commits}	_rima48-bit _{28 commits}	_yashvi-3106 _{28 commits}	_{Subramaniyajothi6} _{28 commits}	_Nilamma19 _{27 commits}	_soumyasync _{26 commits}	_{santoshikumbhar3-art} _{26 commits}
_{abhinavkhedwal4-maker} _{26 commits}	_priyan923 _{26 commits}	_{dishamaurya081-create} _{26 commits}	_Jidnyasa-P _{26 commits}	_Shanidhya01 _{26 commits}	_{DebasmitaBose0} _{26 commits}	_{SG17THEProgrammer} _{26 commits}	_{black-panther1209} _{25 commits}	_rishab11250 _{24 commits}	_kshah123919 _{24 commits}	_KRUSHAL2956 _{24 commits}	_{avrojitduttaj} _{23 commits}
_{Tanisha-Parida} _{23 commits}	_controlcoder _{23 commits}	_Praharsh7270 _{23 commits}	_Pranaykarvi _{23 commits}	_Puneethteja _{22 commits}	_{TEJASWANIANIMIREDDY} _{22 commits}	_neha28kudale _{22 commits}	_shankumar7 _{22 commits}	_Xploit-Ghost _{22 commits}	_{nyaminidurga-cmd} _{21 commits}	_{dakshita-singh-codes} _{21 commits}	_{HarshaNaidu11} _{21 commits}
_hiitarun1 _{21 commits}	_{Sonalgupta2005} _{21 commits}	_{nishiagarwal2006-lang} _{20 commits}	_arpita22905 _{20 commits}	_Zoya220 _{20 commits}	_Varad163 _{20 commits}	_{srividrumavangara} _{19 commits}	_Manav5234 _{19 commits}	_{sasikiranambati} _{19 commits}	_harshap0 _{19 commits}	_{shravanithouta108} _{19 commits}	_{Muditapandey26} _{19 commits}
_{Chaudhary8587} _{19 commits}	_divyansha12 _{18 commits}	_{adityapandey4621} _{18 commits}	_ksrikarsai _{18 commits}	_{CodesWithSubham} _{18 commits}	_{riddhimagupta2} _{17 commits}	_{yashasp322-ship-it} _{17 commits}	_{Kritika200520} _{17 commits}	_paramsavla06 _{17 commits}	_ritikj17 _{17 commits}	_{bhavyapandiya29} _{17 commits}	_joshnajojo12 _{17 commits}
_{Ayushisingh09} _{17 commits}	_Dibya0912 _{17 commits}	_pooja-0206 _{16 commits}	_{geethika-sandireddy} _{16 commits}	_{shivambind269-ai} _{16 commits}	_{sammuuu11151171} _{16 commits}	_Thacker-Meet _{16 commits}	_{PradeepTech-hub} _{16 commits}	_sdv96 _{15 commits}	_AjaayMohare _{15 commits}	_{Khushi-Rajput77} _{15 commits}	_{ankitrmishra01} _{15 commits}
_Karan-787 _{15 commits}	_{sudeekshaballanda-hub} _{14 commits}	_{tanushrithakare} _{14 commits}	_{paridhijain153} _{14 commits}	_Shreyaa0807 _{14 commits}	_{vs-learner-chhavi} _{14 commits}	_purvacode-80 _{14 commits}	_{surajbharsakle07} _{13 commits}	_Juhi4433 _{13 commits}	_devansh-nitb _{13 commits}	_Ankitkr16 _{13 commits}	_{zairahussain27} _{13 commits}
_Hima451 _{12 commits}	_{Daksh-Garg007} _{12 commits}	_Jivan-Patel _{12 commits}	_gayatridot _{12 commits}	_{HarmiBhikadiya} _{12 commits}	_Shylyn05 _{12 commits}	_{dhruv-jani-0808} _{12 commits}	_Krish-Mishra _{12 commits}	_Sricharan106 _{12 commits}	_{arshdeepkaur-code} _{11 commits}	_{ankurkrgupta22122006-oss} _{11 commits}	_Abhi666-max _{11 commits}
_darshiB27 _{11 commits}	_{ajitkumarsaini02} _{11 commits}	_{PRINCE-ANTHONY} _{11 commits}	_{Mohanapriya-sparks} _{11 commits}	_AQUA1310 _{11 commits}	_Himanshux19 _{11 commits}	_tayyibah07 _{11 commits}	_{kamalsharma001} _{11 commits}	_saubhagya-k _{11 commits}	_{PrashantMaurya007} _{11 commits}	_Premshaw23 _{11 commits}	_07Tanvi _{11 commits}
_{bhavyabhardwaj001} _{11 commits}	_{notlexius-glitch} _{10 commits}	_{BinaryBandit-07} _{10 commits}	_{GunvanthKandula} _{10 commits}	_{jayshreerathoreai32-hue} _{10 commits}	_{riddhima25bet10005-a11y} _{10 commits}	_{ashishraj1504} _{10 commits}	_bhaktisp15 _{10 commits}	_toufiq00007 _{10 commits}	_ni2-vsv11 _{10 commits}	_{khushimalani16} _{9 commits}	_devsensei404 _{9 commits}
_{sathvika32427} _{9 commits}	_{ruhelamahi7-code} _{9 commits}	_{revanthbaspally6-cell} _{9 commits}	_{nithinsai-dev} _{9 commits}	_adyamohanka _{9 commits}	_AshrutYadav _{9 commits}	_Ranjan-githu _{9 commits}	_Neelr1912 _{9 commits}	_{trushi-jasani} _{9 commits}	_Bhavesh-png _{9 commits}	_{anshika-guleria} _{9 commits}	_Aritra235 _{9 commits}
_{bhaiyachimkandi01-source} _{8 commits}	_{DharshiniPujarolla} _{8 commits}	_RehanAhmad25 _{8 commits}	_{alishaalmeida10} _{8 commits}	_Aarju247 _{8 commits}	_janievinod _{8 commits}	_Khushii-exe _{8 commits}	_PojashriJM _{8 commits}	_{agrawal-developers} _{8 commits}	_{sarveshwarikumari05} _{8 commits}	_Muskan-S123 _{8 commits}	_gyanend0736 _{8 commits}
_{aryanmalhotraug25-hash} _{7 commits}	_{shauryaparth1902-blip} _{7 commits}	_antara5603 _{7 commits}	_akshaya988 _{7 commits}	_{VanshikaTyagi28131} _{7 commits}	_khushikakade _{7 commits}	_AdyaSinha1 _{7 commits}	_{AnkitaKumariii} _{7 commits}	_{prasiddhi-105} _{7 commits}	_Mehul5124 _{7 commits}	_Dhruva5vora _{7 commits}	_cozyneurons _{7 commits}
_yatri28 _{7 commits}	_{ranbeer06052009} _{7 commits}	_Siddh2024 _{7 commits}	_himadri721 _{7 commits}	_Rakshita006 _{7 commits}	_shyam-medh _{7 commits}	_{surya0904shankar} _{7 commits}	_Khushm _{7 commits}	_claude _{7 commits}	_GarvKhatri01 _{6 commits}	_likhitha827 _{6 commits}	_{mohamedfahim18} _{6 commits}
_krutthiikaaa _{6 commits}	_{anshithayeruva} _{6 commits}	_ParulPatil26 _{6 commits}	_Piyush4801 _{6 commits}	_{himanshursingh21-cloud} _{6 commits}	_{vermamayank0412-lgtm} _{6 commits}	_MajBlaze _{6 commits}	_{aisshwaryaa8-collab} _{6 commits}	_{VishnuPriya110792} _{6 commits}	_{mokshikabhardwaj29} _{6 commits}	_hrshjswniii _{6 commits}	_vanshika3124 _{6 commits}
_{anmolsrivastava073} _{6 commits}	_Tuba1809 _{6 commits}	_Mansi0905 _{6 commits}	_YashviHirani _{6 commits}	_one8alpha _{6 commits}	_Diya-od _{6 commits}	_ShamrithaGS _{6 commits}	_Alishaa-987 _{6 commits}	_Vartika-l7 _{6 commits}	_Aryan-Lade _{6 commits}	_lahari465 _{6 commits}	_Akhileswar6 _{6 commits}
_JC230903 _{6 commits}	_monushah108 _{6 commits}	_{HarshGupta492} _{6 commits}	_Hemant-kalia _{6 commits}	_AbishmaB _{6 commits}	_{gowrishvarma2003} _{6 commits}	_{anishmusician} _{6 commits}	_itsLohith01 _{5 commits}	_{lakshaygujjar273-cys} _{5 commits}	_koko31259 _{5 commits}	_SahilSolve02 _{5 commits}	_{aryan-nmaurya} _{5 commits}
_{PalashKulkarni} _{5 commits}	_{SAMJOD07-devz} _{5 commits}	_{bhavyajain0810} _{5 commits}	_{karthikeyakakarlapudi2007} _{5 commits}	_Logesh-Pro _{5 commits}	_vaishsajal82 _{5 commits}	_yogita-mehta _{5 commits}	_{vaddempuditejaswini30-star} _{5 commits}	_{siddhigrg1201} _{5 commits}	_{mysterio-Apoorva} _{5 commits}	_Shruti1420 _{5 commits}	_{PAWANBHOWATE04} _{5 commits}
_adepat06 _{5 commits}	_Namratha36 _{5 commits}	_{Siddhi-Kapoor} _{5 commits}	_iamsiddhant9 _{5 commits}	_{YerraguntaAjayKumar} _{5 commits}	_radhikatbbt _{5 commits}	_{udaycodespace} _{5 commits}	_webgo-oss _{5 commits}	_Lehana02 _{5 commits}	_{Bhavikpatel2910} _{5 commits}	_Luffy-456 _{5 commits}	_{NagasriHarini} _{5 commits}
_{chirag-projects} _{5 commits}	_reezmahanan _{5 commits}	_Yati-C14 _{5 commits}	_sabya-code03 _{5 commits}	_Nikitasoni22 _{5 commits}	_{ShafinNigamana} _{5 commits}	_{Sai-Ramya-prog} _{5 commits}	_ida-jemi _{5 commits}	_jayesh-durge _{5 commits}	_Kalpnaa _{5 commits}	_anshul23102 _{5 commits}	_Aanyas08 _{5 commits}
_Arpita2919 _{5 commits}	_Pratik-kr21 _{5 commits}	_Hridayesh68 _{5 commits}	_AgnusSerena _{5 commits}	_ggaisenn _{5 commits}	_{vyshnavivardireddy} _{4 commits}	_{GaganGoyal2008} _{4 commits}	_{Abhinav21Chauhan} _{4 commits}	_{rishikareddy771} _{4 commits}	_{Gobbledygook86} _{4 commits}	_{adyas0628-rgb} _{4 commits}	_{LikithaTummapudi} _{4 commits}
_{unnatipandey19} _{4 commits}	_{prastutirai847-design} _{4 commits}	_{prernasingh0321-ops} _{4 commits}	_{saifullah-khan11} _{4 commits}	_{dhruvnayak001} _{4 commits}	_Asifmd45 _{4 commits}	_Mdanas198957 _{4 commits}	_SRSoham _{4 commits}	_keerthana266 _{4 commits}	_SHERUBA-S _{4 commits}	_gaurav123-4 _{4 commits}	_Yazhini74 _{4 commits}
_nityanara _{4 commits}	_pushtikadia _{4 commits}	_ezManish _{4 commits}	_Samridhi1213 _{4 commits}	_{bhanuvarma045} _{4 commits}	_JoyceHanan _{4 commits}	_simran-nitj _{4 commits}	_{VinothanaBalakrishnan05} _{4 commits}	_Pallavi960 _{4 commits}	_Suneet0806 _{4 commits}	_RashmiAg27 _{4 commits}	_Annunitha _{4 commits}
_bh462007 _{4 commits}	_developer933 _{4 commits}	_tri-pti _{4 commits}	_Rakshak05 _{4 commits}	_thatditsyboy _{4 commits}	_vidhimeshram _{4 commits}	_BatoolAmina _{4 commits}	_shreyyyy666 _{3 commits}	_alisha-khan6 _{3 commits}	_anurag5603 _{3 commits}	_mythri2405 _{3 commits}	_GeetikaGA _{3 commits}
_dhammshila _{3 commits}	_{divyanshu-dee} _{3 commits}	_{Sreeya-kumari} _{3 commits}	_{buildwithnisha} _{3 commits}	_{vs-tries-to-code} _{3 commits}	_{shakilathasneem9} _{3 commits}	_sam987-dek _{3 commits}	_{sehaj007saini} _{3 commits}	_YASHK-arch _{3 commits}	_{lokeshkumar69} _{3 commits}	_{swastiksinha1} _{3 commits}	_{ritikamahato924} _{3 commits}
_vivek0028 _{3 commits}	_Aryanshravan _{3 commits}	_Y-o-ULA _{3 commits}	_baishnvi _{3 commits}	_GkBuilds16 _{3 commits}	_inimai09 _{3 commits}	_25032007 _{3 commits}	_{MananJain-dev} _{3 commits}	_{Pranathi-Kunjeti} _{3 commits}	_{sayan-netizen} _{3 commits}	_{jyothikacodes} _{3 commits}	_{sdeepika-2606} _{3 commits}
_{likhithsai007} _{3 commits}	_Ashmit76311 _{3 commits}	_DnN04 _{3 commits}	_shreeiya17 _{3 commits}	_Parigarg2006 _{3 commits}	_{AnitaGeorge404} _{3 commits}	_Aishu1525 _{3 commits}	_diyasharma22 _{3 commits}	_{samikshapatil5} _{3 commits}	_{RosheshChaware} _{3 commits}	_DishaAndre _{3 commits}	_{Paawangarg1084} _{3 commits}
_lekhanpro _{3 commits}	_{AMillionDriver} _{3 commits}	_{Bhoomikakaushik} _{3 commits}	_saii-Abburi _{3 commits}	_boss477 _{3 commits}	_Ragini-Roy7 _{3 commits}	_payalrvs3 _{3 commits}	_chndnshrma _{3 commits}	_SajalRawat _{3 commits}	_Maqbool61 _{3 commits}

Auto-updated daily · View all →

Maintainer

Saptarshi Sadhu

EaseMotion CSS is designed, curated, and actively maintained by Saptarshi Sadhu. All contributions are reviewed and standardized before integration. The framework does not accept unreviewed direct edits.

Only the maintainer merges pull requests. This is enforced via CODEOWNERS.

Changelog

See CHANGELOG.md for the full release history.

Latest: v1.1.0 — New text motion & ambient utilities, v1.1 release, minified bundle optimization, 12,000+ merged PRs.

License

You are free to use EaseMotion CSS in personal and commercial projects. Attribution appreciated but not required.

Thank you for building EaseMotion CSS with me. 💜

Every star, every PR, every issue — it all adds up.

— Saptarshi Sadhu · @SAPTARSHI-coder

Built with care · Zero dependencies · Animation-first · Community-driven

Accessibility

EaseMotion CSS supports the prefers-reduced-motion media query to respect users who prefer reduced motion and reduce animation-related discomfort. When enabled at the operating system level, animations and transitions are minimized to provide a more accessible experience.

flick9000/winscript

Open-source tool to build your Windows script from scratch. It includes debloat, privacy, performance & app installing scripts.

WinScript

WinScript is a lightweight and easy to use tool designed to improve and customize your Windows experience. Easily remove bloatware, disable telemetry, improve Windows performance, bulk install your favorite apps, and more.

Features

🧹 Debloat

Remove pre-installed bloatware and unnecessary components from Windows. Uninstall Microsoft Store, OneDrive, Copilot, and Edge; disable Widgets, Recall, and Consumer Features; and strip out anything else you don't need.

🔒 Privacy

Take back control of your data. Block app access to sensitive permissions, disable background syncing of themes and passwords, and stop Microsoft's telemetry across Windows, Office, Search, and more. Also covers third-party data collection from apps like Adobe, VS Code, and Nvidia.

⚡ Performance

You can enable the Ultimate Performance plan, reduce mouse input delays, disable Superfetch and Storage Sense, tune Windows Defender's CPU usage, and adjust startup services among many other tweaks.

📦 App Installer

The Browse Apps section makes it easy to bulk install all your essential software in just a few clicks. Choose from a list of popular apps, browsers, utilities, dev tools, media players, and more, and WinScript will generate a script to install using your preferred package manager: Chocolatey or Winget.

💿 Unattended Setup

Create a customized autounattend.xml file to automate Windows installations from start to finish. Bypass Windows 11 hardware requirements, create local accounts, skip unnecessary OOBE prompts and updates, and automatically run your WinScript configuration after setup completes.

Usage

🖥️ Run directly:

irm "https://winscript.cc/irm" | iex

🖥️ Install via Winget:

winget install winscript

⚙️ Import a configuration file:

Use the -i flag to import a configuration file when launching the app.

.\winscript.exe -i "C:\path\to\config.json"

Support

👷 Contributing

Contributions are welcome! Fork the repository and create a pull request with your changes.

⭐ Star

Feel free to leave a star and help the project reach more people!

☕ Donate

If you find this project helpful, consider supporting it by buying me a coffee!

Code Signing

📜 Free code signing provided by SignPath.io, certificate by SignPath Foundation.

Contact

📧 Have a question or want to get in touch? Reach out at contact@winscript.cc

License

📒 This project is licensed under the GPL v3 License. See the LICENSE file for more details.

ryanoasis/nerd-fonts

Iconic font aggregator, collection, & patcher. 3,600+ icons, 50+ patched fonts: Hack, Source Code Pro, more. Glyph collections: Font Awesome, Material Design Icons, Octicons, & more

Nerd Fonts is a project that patches developer targeted fonts with a high number of glyphs (icons). Specifically to add a high number of extra glyphs from popular 'iconic fonts' such as Font Awesome, Devicons, Octicons, and others.

The following flow diagram shows the current glyph sets included:

_{Diagram created using @SankeyMATIC}

Important Notices

master branch file paths are not considered stable. Verify your repository URI references
cloning this repository is not recommended (due to Repo size) unless you are going to be contributing to development

TL;DR

Installation Options

Features

Developer / Contributor

Project Motivation

Additional Info

TL;DR

Nerd Fonts takes popular programming fonts and adds a bunch of Glyphs. There is also a font patcher available if your desired font isn't already patched. For more high level information see the wiki. If you are looking for the Vim plugin see VimDevIcons ➶.

Various Download Options for Fonts

If you...

Option 1. want to download a font family package of variations (bold, italic, etc.) see download an archive
Option 2. are on macOS and want to use Homebrew see Homebrew Fonts
Option 3. are on Windows and want to use Chocolatey or Scoop see Unofficial Chocolatey or Scoop Repositories
Option 4. are on Arch Linux and want to use Extra packages see Arch Extra Repositories
Option 5. are using PowerShell and want an interactive setup or use in scripts see the PowerShell Installer
Option 6. want to use the curl command or use in scripts see Ad Hoc Curl Download
Option 7. want to automate installing or use in scripts see the Install Script
Option 8. want to install only one font for all fonts see Font Fallback
Option 9. want complete control then see cloning the repo
Option 10. want to patch your own font see the Font Patcher

Features

A FontForge Python script to patch any font
- Includes an option to create Monospaced (fixed-pitch, fixed-width) or double-width (non-monospaced) glyphs
- For more details see the Font Patcher section
67 already patched font families
Over 10,000 glyphs/icons combined (more details)
- Current glyph sets include: Powerline with Extra Symbols, Font Awesome, Material Design Icons, Weather, Devicons, Octicons, Font Logos (Formerly Font Linux), Pomicons, Codeicons
Monospaced (fixed-pitch, fixed-width) or double-width (non-monospaced) or proportional glyphs version of each font
- This refers to the Nerd Font glyphs themselves not necessarily the Font as a whole
A Developer/Contributor provided bash script to re-patch all the fonts

Glyph Sets

The currently used sets are listed in src/glyphs/README.md.

🔍 🔍 You can search for glyphs easily on NerdFonts.com via the Cheat Sheet

See Wiki: Glyph Sets and Codepoints for more details

Icon names in shell

See Wiki: Icon names in shell

Patched Fonts

A preview of all fonts can be found here.

Font Name	Original Font Name and Repository	ver	*RFN
0xProto Nerd Font	0xProto	2.502	NO
3270 Nerd Font	3270	3.0.1	NO
AdwaitaMono Nerd Font	Adwaita Mono	34.1	NO
Agave Nerd Font	Agave	38	NO
AnnotationMono Nerd Font	Annotation Mono	0.4	NO
AnonymicePro Nerd Font	Anonymous Pro	1.002	YES
Arimo Nerd Font	Arimo	1.33	NO
AtkynsonMono Nerd Font	Atkinson Hyperlegible Mono	2.001	YES
AurulentSansMono Nerd Font	Aurulent Sans Mono (Stephen G. Hartke)		NO
BigBlueTerminal Nerd Font	BigBlueTerminal (VileR)		NO
BitstromWera Nerd Font	Vera Sans Mono (Bitstream Inc)	1.1	YES
BlexMono Nerd Font	IBM Plex Mono	2.004	YES
CaskaydiaCove Nerd Font	Cascadia Code	2407.24	YES
CaskaydiaMono Nerd Font	Cascadia Mono	2407.24	YES
CodeNewRoman Nerd Font	Code New Roman (Sam Radian)	2.0	NO
ComicShannsMono Nerd Font	Comic Shanns Mono	1.3.2	NO
CommitMono Nerd Font	Commit Mono	1.143	NO
Cousine Nerd Font	Cousine	1.241	NO
D2Koding Nerd Font	D2Coding	1.3.2	YES
DaddyTimeMono Nerd Font	DaddyTimeMono	1.2.3	NO
DepartureMono Nerd Font	Departure Mono	1.500	NO
DejaVuSansMono Nerd Font	DejaVu	2.37	NO
DroidSansMono Nerd Font	Droid Sans Mono (Ascender Corp)	1.00-113	NO
EnvyCodeR Nerd Font	Envy Code R	0.79	YES
FantasqueSansMono Nerd Font	Fantasque Sans Mono	1.8.0	NO
FiraCode Nerd Font	Fira Code	6.2	NO
FiraMono Nerd Font	Fira Mono	3.206	NO
GeistMono Nerd Font	Geist Mono	1.702	NO
GoMono Nerd Font	Go-Mono	2.010	NO
Gohu Nerd Font	Gohu TTF, Gohu	2.0	NO
GoogleSansCode Nerd Font	Google Sans Code	7.001	NO
Hack Nerd Font	Hack	3.003	NO
Hasklug Nerd Font	Hasklig	1.2	YES
HeavyDataMono Nerd Font	HeavyData (Vic Fieger)	1	NO
Hurmit Nerd Font	Hermit	2.0	YES
iM-Writing Nerd Font	iA-Writer	Dec 2018	YES
Inconsolata Nerd Font	Inconsolata	3.000	NO
InconsolataGo Nerd Font	InconsolataGo	1.013	NO
Inconsolata LGC Nerd Font	Inconsolata LGC	3.201	NO
IntoneMono Nerd Font	Intel One Mono	1.4.0	YES
Iosevka Nerd Font	Iosevka	34.8.0	NO
IosevkaTerm Nerd Font	Iosevka Term	34.8.0	NO
IosevkaTermSlab Nerd Font	Iosevka Term Slab	34.8.0	NO
JetBrainsMono Nerd Font	JetBrains Mono	2.304	NO
Lekton Nerd Font	Lekton	34	NO
Literation Nerd Font	Liberation	2.1.5	YES
Lilex Nerd Font	Lilex	2.700	NO
MartianMono Nerd Font	MartianMono	1.1.0	NO
Meslo Nerd Font	Meslo	1.21	NO
Monaspice Nerd Font	Monaspace	1.400	YES
Monofur Nerd Font	Monofur (Tobias B Koehler)	1.0	NO
Monoid Nerd Font	Monoid	0.61	NO
Mononoki Nerd Font	Mononoki	1.6	YES
M+ Nerd Font	MPlus Fonts	1.100	NO
Noto Nerd Font	Noto	div	NO
OpenDyslexic Nerd Font	OpenDyslexic	2.001	NO
Overpass Nerd Font	Overpass	3.0.5	NO
ProFont Nerd Font	ProFont	2.3, 2.2	NO
ProggyClean Nerd Font	ProggyClean (Tristan Grimmer)	2004/04/15	NO
RecMono Nerd Font	Recursive Mono	1.085	NO
RobotoMono Nerd Font	Roboto Mono	3.0	NO
SauceCodePro Nerd Font	Source Code Pro	2.042	YES
ShureTechMono Nerd Font	Share Tech Mono	1.003	YES
SpaceMono Nerd Font	Space Mono	1.003	NO
Terminess Nerd Font	Terminus TTF	4.49.3	YES
Tinos Nerd Font	Tinos	1.23	NO
Ubuntu Nerd Font	Ubuntu Font	0.83	NO
UbuntuMono Nerd Font	Ubuntu Font	0.80	NO
UbuntuSans Nerd Font	Ubuntu Sans	1.006	NO
UbuntuSansM Nerd Font	Ubuntu Sans Mono	1.100	NO
VictorMono Nerd Font	Victor Mono	1.5.6	NO
ZedMono Nerd Font	Zed Mono	1.2.0	NO

_{*RFN = Reserved Font Name}

Variations

no flags given (defaults to only Seti-UI + Custom and Devicons)
double (variable/proportional) or single (fixed/monospaced) or proportional width icon-glyphs
Font Awesome
Font Awesome Extension
Material Design Icons
Weather
GitHub Octicons
Font Logos (Formerly Font Linux)
Powerline Extra Symbols
IEC Power Symbols
Pomicons
Codicons

Font Installation

Some of the options below just help you to download the font file(s) (i.e. .ttf or .otf) or archives of font files. These must be installed on your system, depending on your OS. Usually (double) clicking the font files individually does the trick. Ask your OS' community if installing a font file is a problem.

`Option 1: Release Archive Download`

Best option if you want an archive or complete font family of variations (Bold, Italic, etc.).

Fonts are available for download as packages in the latest release A nice overview is on the Nerd Font site (but misses the more compact xv archives).

If you want download the latest release of a given font inside a script you can use (replace "JetBrainsMono" with your font):

curl -OL https://github.com/ryanoasis/nerd-fonts/releases/latest/download/JetBrainsMono.tar.xz

`Option 2: Homebrew Fonts`

Best option if on macOS and want to use Homebrew.

All fonts are available via Homebrew Cask on macOS (OS X)

brew install font-hack-nerd-font

On Linux you have to add --cask after install.

`Option 3: Unofficial Chocolatey or Scoop Repositories`

Option for Windows and wanting to use Chocolatey or Scoop.

Chocolatey users can download fonts published to the Chocolatey Community Repository (CCR):

choco install nerd-fonts-hack

Scoop users can download fonts using the Scoop bucket for Nerd Fonts:

scoop bucket add nerd-fonts
scoop install Hack-NF

`Option 4: Arch Extra Repository`

Option for Arch Linux and wanting to use Extra packages.

Most fonts are available via Arch Extra packages. Some special packages are in AUR.

`Option 5: PowerShell Installer`

Best option for interactive setup guidance or automating installations through PowerShell scripts.

PSModule NerdFonts

This is a 3rd-party community tool. More information can be found on its GitHub repository here.

To install the module:

Install-PSResource -Name NerdFonts
Import-Module -Name NerdFonts

To install one font:

Install-NerdFont -Name 'FiraCode' # Tab completion works on name

Powershell Web Installer

This is a 3rd-party community tool. More information can be found on its GitHub repository here.

Requires PowerShell 7+ to be installed on Windows, macOS, or Linux.
Windows PowerShell 5.1 is also supported.

To run the interactive installer, use the following command:

& ([scriptblock]::Create((iwr 'https://to.loredo.me/Install-NerdFont.ps1')))

To install specific fonts directly, use the following command:

& ([scriptblock]::Create((iwr 'https://to.loredo.me/Install-NerdFont.ps1'))) -Name hack, heavy-data

`Option 6: Ad Hoc Curl Download`

Option if you want to use the curl command or for use in scripts.

Note: Will not work to get newer fonts as they are not inside the repo anymore.

Linux

mkdir -p ~/.local/share/fonts
cd ~/.local/share/fonts && curl -fLO https://github.com/ryanoasis/nerd-fonts/raw/HEAD/patched-fonts/DroidSansMono/DroidSansMNerdFont-Regular.otf

Note: deprecated alternative paths: ~/.fonts

macOS (OS X)

cd ~/Library/Fonts && curl -fLO https://github.com/ryanoasis/nerd-fonts/raw/HEAD/patched-fonts/DroidSansMono/DroidSansMNerdFont-Regular.otf

`Option 7: Install Script`

Best option if you want to automate installing or for use in scripts.

Note:

Requires (shallow) cloning the repo as of now 😦
Will not work to get newer fonts as they are not inside the repo anymore.

All fonts:

Installs all the patched Fonts (Warning: This is a lot of Fonts adding up to a large size)

./install.sh

or, in PowerShell (Windows only):

./install.ps1

Single font:

Installs a single Font of your choice

./install.sh <FontName>
./install.sh Hack
./install.sh HeavyData

or, in PowerShell (Windows only):

./install.ps1 <FontName>
./install.ps1 Hack
./install.ps1 HeavyData
./install.ps1 FiraCode, Hack
./install.ps1 DejaVuSansMono -WhatIf

`Option 8: Font Fallback`

Most systems have a mechanism to search for an alternative font when the current font does not have a glyph that is needed. For example you edit a Latin text and insert a Chinese character, that glyph is taken not from your active font (it does not have it) but from some other font.

For this font fallback you can use one of the SymbolsOnly fonts.

For fontconfig based systems like Linux you can improve the behavior with the 10-nerd-font-symbols.conf configuration file, that needs to be manually installed.

Pro: One symbol font is sufficient for all text fonts
Con: Scaling and placement of the fallback symbols can be hit or miss

`Option 9: Clone the Repo`

Best option for full control, all or some of the fonts, or contributing to development.

Note: Will not work to get newer fonts as they are not inside the repo anymore.

A full clone of this repository is not required nor efficient (mostly due to Repository size) if you are simply only interested in a limited set of fonts.

If you do want to clone the entire repo be sure to shallow clone:

git clone --depth 1

Even if you develop you probably do not need the old versions of the font files. With this command you have all commits but not all the old data - it will be loaded only if you check out old binaries (or do a blame):

git clone --filter=blob:none git@github.com:ryanoasis/nerd-fonts

If you want to clone just a sub-directory, use git sparse-checkout.

git clone --filter=blob:none --sparse git@github.com:ryanoasis/nerd-fonts
cd nerd-fonts
git sparse-checkout add patched-fonts/JetBrainsMono

`Option 10: Patch Your Own Font`

The option for patching your own font or fully customizing the patched font.

Use the provided Python command line script to generate a patched font from your own font to get the extra new glyphs

See: Font Patcher for usage

use this option if you do not want to use one of the fonts provided
you will still need to copy the generated font to the correct font directory on your system

font-patcher

Patching the font of your own choosing:

Use the script
- Download script and its helper files as archive and extract
- Just downloading the font-patcher script is not enough.
- Requires: Fontforge, Python 3, python-fontforge and argparse packages
  - Fontforge can be installed as package
  - or on OSX via brew install fontforge
  - or as AppImage
- Usage, recommended:
```
fontforge -script font-patcher PATH_TO_FONT
```
- Usage, direct (more convenient call, if it works for you):
```
./font-patcher PATH_TO_FONT
```
- Usage, with Fontforge AppImage
  
  Note: chmod u+x the AppImage after download. All supplied paths need to be absolute and an explicit output path is required! If everything is located in the same directory, you can use the $PWD shorthand.
```
./FontForge.AppImage -script $PWD/font-patcher $PWD/BaseFont.ttf -out /tmp
```

Use docker

Default parallel tasks

docker run --rm -v /path/to/fonts:/in:Z -v /path/for/output:/out:Z nerdfonts/patcher [OPTIONS]

Single process (slow)

docker run --rm -v /path/to/fonts:/in:Z -v /path/for/output:/out:Z -e "PN=1" nerdfonts/patcher [OPTIONS]

Specify the parallel tasks number to 10

docker run --rm -v /path/to/fonts:/in:Z -v /path/for/output:/out:Z -e "PN=10" nerdfonts/patcher [OPTIONS]

Update docker image

docker pull nerdfonts/patcher

Run interatively to get full control of font-patcher invocation and all debug output and error messages:

docker run -it -v /path/to/fonts:/in:Z --entrypoint=/bin/sh nerdfonts/patcher

And then in the container for example:

/ # cd /in
/in # fontforge --script ../nerd/font-patcher [OPTIONS] your_font.ttf

Note

The resulting font's family (aka font name) will be set to the original family after CamelCasing, removing whitespace and appending Nerd Font. For example, iosevka term would become IosevkaTerm Nerd Font.

Full options follow, see also page explaining all options:

Nerd Fonts Patcher v3.5.0-16 (4.27.2) (ff 20230101)
usage: font-patcher [--careful] [--debug [{0,1,2,3}]] [--extension EXTENSION]
                    [--help] [--makegroups [{-1,0,1,2,3,4,5,6}]] [--mono]
                    [--outputdir OUTPUTDIR] [--quiet] [--single-width-glyphs]
                    [--variable-width-glyphs] [--version]
                    [--braille [{rectangle,circle,gapless}]] [--complete]
                    [--codicons] [--fontawesome] [--fontawesomeext] [--fontlogos]
                    [--material] [--octicons] [--pomicons] [--powerline]
                    [--powerlineextra] [--powersymbols] [--weather]
                    [--adjust-line-height] [--boxdrawing] [--cell CELLOPT]
                    [--configfile CONFIGFILE] [--custom CUSTOM] [--dry]
                    [--experimental EXPERIMENTAL] [--glyphdir GLYPHDIR]
                    [--has-no-italic] [--metrics {HHEA,TYPO,WIN}]
                    [--name FORCE_NAME] [--postprocess POSTPROCESS] [--removeligs]
                    [--xavgcharwidth [XAVGWIDTH]] [--progressbars | --no-progressbars]
                    font

Nerd Fonts Font Patcher: patches a given font with programming and development related glyphs

* Website: https://www.nerdfonts.com
* Version: 3.5.0-16
* Development Website: https://github.com/ryanoasis/nerd-fonts
* Changelog: https://github.com/ryanoasis/nerd-fonts/blob/-/changelog.md

positional arguments:
  font                  The path to the font to patch (e.g., Inconsolata.otf)

options:
  --careful             Do not overwrite existing glyphs if detected
  --debug [{0,1,2,3}]   Verbose mode (optional: 1=just to file; 2*=just to terminal; 3=display and file)
  --extension, -ext EXTENSION
                        Change font file type to create (e.g., ttf, otf)
  --help, -h            Show this help message and exit
  --makegroups [{-1,0,1,2,3,4,5,6}]
                        Use alternative method to name patched fonts (default=1)
  --mono, -s            Create monospaced font, existing and added glyphs are single-width (implies --single-width-glyphs)
  --outputdir, -out OUTPUTDIR
                        The directory to output the patched font file to
  --quiet, -q           Do not generate verbose output
  --single-width-glyphs
                        Whether to generate the glyphs as single-width not double-width (default is double-width) (Nerd Font Mono)
  --variable-width-glyphs
                        Do not adjust advance width (no "overhang") (Nerd Font Propo)
  --version, -v         Show program's version number and exit

Symbol Fonts:
  --braille [{rectangle,circle,gapless}]
                        Add Braille Glyphs, can pass a string to control style (optional: *rectangle, circle, gapless)
  --complete, -c        Add all available Glyphs
  --codicons            Add Codicons Glyphs (https://github.com/microsoft/vscode-codicons)
  --fontawesome         Add Font Awesome Glyphs (http://fontawesome.io/)
  --fontawesomeext      Add Font Awesome Extension Glyphs (https://andrelzgava.github.io/font-awesome-extension/)
  --fontlogos           Add Font Logos Glyphs (https://github.com/Lukas-W/font-logos)
  --material, --mdi     Add Material Design Icons (https://github.com/templarian/MaterialDesign)
  --octicons            Add Octicons Glyphs (https://octicons.github.com)
  --pomicons            Add Pomicon Glyphs (https://github.com/gabrielelana/pomicons)
  --powerline           Add Powerline Glyphs
  --powerlineextra      Add Powerline Extra Glyphs (https://github.com/ryanoasis/powerline-extra-symbols)
  --powersymbols        Add IEC Power Symbols (https://unicodepowersymbol.com/)
  --weather             Add Weather Icons (https://github.com/erikflowers/weather-icons)

Expert Options:
  --adjust-line-height, -l
                        Whether to adjust line heights (attempt to center powerline separators more evenly)
  --boxdrawing          Force patching in (over existing) box drawing glyphs
  --cell CELLOPT        Adjust or query the cell size, e.g. use "0:1000:-200:800" or "?"
  --configfile CONFIGFILE
                        Specify a file path for configuration file (see sample: src/config.sample.cfg)
  --custom CUSTOM       Specify a custom symbol font, all glyphs will be copied; absolute path suggested
  --dry                 Do neither patch nor store the font, to check naming
  --experimental EXPERIMENTAL
                        Enable experimental/unstable feature, get hints with "?" or "help"
  --glyphdir GLYPHDIR   Path to glyphs to be used for patching
  --has-no-italic       Font family does not have Italic (but Oblique/Slanted), to help create correct RIBBI set
  --metrics {HHEA,TYPO,WIN}
                        Select vertical metrics source (for problematic cases)
  --name FORCE_NAME     Specify naming source ('full', 'postscript', 'filename', or concrete free name-string)
  --postprocess POSTPROCESS
                        Specify a Script for Post Processing
  --removeligs, --removeligatures
                        Removes ligatures specified in configuration file (needs --configfile)
  --xavgcharwidth [XAVGWIDTH]
                        Adjust xAvgCharWidth (optional: concrete value)
  --progressbars        Show percentage completion progress bars per Glyph Set (default)
  --no-progressbars     Don't show percentage completion progress bars per Glyph Set

Examples

./font-patcher Droid\ Sans\ Mono\ for\ Powerline.otf
./font-patcher Droid\ Sans\ Mono\ for\ Powerline.otf -s -q
./font-patcher Droid\ Sans\ Mono\ for\ Powerline.otf --mono --quiet

./font-patcher Inconsolata.otf --fontawesome
./font-patcher Inconsolata.otf --fontawesome --octicons --pomicons
./font-patcher Inconsolata.otf

./FontForge.AppImage -script /tmp/nerdfonts/font-patcher /tmp/nerdfonts/CascadiaMonoPL-Semibold.ttf --fontawesome -out /tmp
./FontForge.AppImage -script $PWD/font-patcher $PWD/CascadiaMonoPL-Semibold.ttf --octicons -out $HOME

docker run --rm -v ~/myfont/patchme:/in:Z -v ~/myfont/patched:/out:Z nerdfonts/patcher
docker run --rm -v ~/Desktop/myfont/patchme:/in:Z -v ~/Desktop/myfont/patched:/out:Z nerdfonts/patcher --fontawesome

Usually you want the --complete option.

Gotta Patch 'em All Font Patcher!

for Contributor or Developer use
re-patches all fonts in the unpatched directory:
```
./gotta-patch-em-all-font-patcher\!.sh
```
can optionally limit to specific font name pattern:
```
./gotta-patch-em-all-font-patcher\!.sh Hermit
```

or to specific directory name start:

./gotta-patch-em-all-font-patcher\!.sh /Heavy

Full options:

Usage: ./gotta-patch-em-all-font-patcher!.sh [OPTION] [FILTER]

    OPTION:
        -c, --checkfont     Create the font(s) in check-fonts/ instead
        -p, --purge         Force purging of the destination in patched-fonts/
        -t, --keeptime      Try to preserve timestamp of previously patched
                            font in patched-fonts/ directory
        -v, --verbose       Show more information when running
        -i, --info          Rebuild JUST the readmes
        -j, --jobs          Run up to 8 patch processes in parallel
        -h, --help          Show this help

    FILTER:
        The filter argument to this script is a filter for the fonts to patch.
        The filter is a regex (glob * is expressed as [^/]*, see `man 7 glob`)
        All font files that start with that filter (and are ttf, otf, or sfd files) will
        be processed only.
          Example ./gotta-patch-em-all-font-patcher\!.sh "iosevka"
          Process all font files that start with "iosevka"
        If the argument starts with a '/' all font files in a directory that matches
        the filter are processed only.
          Example ./gotta-patch-em-all-font-patcher\!.sh "/iosevka"
          Process all font files that are in directory "iosevka"

    ENVIRONMENT:
        NERDFONTS: You can supply any font-patcher arguments here that will
            be appended to all internal font-patcher calls. For example
            NERDFONTS="--dry --debug 2" ./gotta-patch-em-all-font-patcher!.sh

Contributing

See contributing.md

Common Problems

Some solutions can be found on the Wiki, if you are lucky. For example hints to use the pager less are there:

Unstable File Paths

⚠️ Warning: File paths may change based on releases (especially major version bumps)

Reference the release tag or branch and not the ~~master~~ branch because paths are subject to change for each release

For example:
- ✅ Use: https://github.com/ryanoasis/nerd-fonts/tree/v3.0.0/patched-fonts/Hermit/Regular/HurmitNerdFont-Regular.otf
- ✅ Use: https://github.com/ryanoasis/nerd-fonts/blob/0.9.0/patched-fonts/Hermit/Medium/complete/Hurmit%20Medium%20Nerd%20Font%20Complete.otf
- ❌ Instead of: https://github.com/ryanoasis/nerd-fonts/blob/master/patched-fonts/Hermit/Medium/complete/Hurmit%20Medium%20Nerd%20Font%20Complete.otf

Other Good Fonts to Patch

Non exhaustive list of fonts that would benefit from being patched but are not included in Nerd Fonts due to their license (proprietary, commercial, etc.):

Project Motivation

See Wiki: Project Purpose

Changelog

See changelog.md

License

See LICENSE

ZYY817/YuqiEngine

宇奇引擎 - 游戏性能优化工具

宇奇引擎 · Yuqi Engine

面向 Windows 10 / 11 的模块化系统优化、状态检测、恢复与诊断工具

简体中文 · English

下载安装 · 真实界面 · 使用前必读 · 问题反馈 · English

_{上图由当前启动页代码真实渲染生成，不是概念效果图。}

关于作者与项目

宇奇引擎目前由我个人独立开发和维护。

为了完成这个项目，我在工作之外投入了大量时间，用于功能开发、界面设计、问题排查、兼容性测试、文档整理和版本发布。很多时候，我基本没有自己的娱乐和休息时间，长期保持着“工作、开发、生活”三点一线的节奏。

项目开发过程中使用了 AI 作为辅助工具，用于提升代码编写、问题分析、测试整理和文档编写的效率；但功能规划、代码整合、实际测试、问题修复和最终发布，均由我本人负责。

由于个人开发资源和测试设备有限，当前版本仍可能存在尚未发现的兼容性问题。感谢每一位愿意使用、理解和反馈问题的用户。

请作者喝杯咖啡

如果你觉得宇奇引擎还不错，欢迎请作者喝杯咖啡。

_{微信 / 支付宝}

关于软件体积

当前发布包体积较大，主要是因为包含自包含 .NET 运行环境、WebView2 离线安装组件、完整功能模块、中英文资源、备份诊断功能和持续保持助手。这样可以减少用户额外安装依赖时遇到的问题。

后续会在不影响核心功能和离线可用性的前提下，逐步进行精简和体积优化。

当前版本状态

Important

宇奇引擎目前仍是公开体验版本，不是已经覆盖所有设备和场景的最终版本。

Warning

请在应用任何系统修改前完成备份。 当前版本仍可能存在尚未发现的问题，也不能保证每项优化都适合你的电脑或带来性能提升。建议先创建宇奇引擎备份和 Windows 系统还原点，并单独备份重要个人文件。若你无法接受恢复设置、使用还原点或在极端情况下重装系统的风险，请只使用检测功能，不要应用系统修改。

项目由个人独立开发和维护，现有设备条件无法覆盖所有 CPU、显卡、驱动、Windows 版本、区域策略和第三方安全软件组合。因此，即使已经进行自动化测试和实际使用验证，仍可能存在状态读取不完整、功能受系统策略限制、特定硬件不适用或交互细节不完善等问题。

我会继续根据真实反馈定位和修复问题，但不会承诺每台电脑都能使用全部功能，也不会承诺固定的 FPS、延迟或性能提升。如果遇到问题，请生成问题包并反馈；能复现、能确认的问题，我会尽力持续修复。

当前信息	内容
最新体验版本	`v0.1.2`
支持系统	Windows 10 1809（Build 17763）及以上、Windows 11，64 位
发布形式	中英文安装版、ZIP 免安装版
运行环境	自包含 .NET 8，并附带离线 WebView2 安装组件
代码签名	当前体验版未购买受信任证书，Windows 可能显示“未知发布者”或 SmartScreen 提示
产品定位	按模块检测、解释、选择、应用和恢复；不是“万能一键提速”

这是什么

宇奇引擎把分散在 Windows 中的优化、诊断和恢复入口组织成统一界面。软件会尽量先读取真实系统状态，再告诉用户：

当前设置是什么；
该项目是否适用于当前电脑；
为什么暂时不可用或需要管理员权限；
修改后可能带来的作用、风险和恢复方式；
操作是否真正完成，还是仍需重新读取或人工确认。

软件不会因为检测失败就把项目标记为成功，也不会在用户只进行检测时自动写入系统设置。

主要能力

范围	当前提供的能力
游戏与性能	游戏优化中心、性能调优、CPU 调优、图形与显示、内存、音频、网络、外设
Windows 设置	隐私保护、系统调校、桌面体验、任务调度、系统服务、系统清理
硬件与诊断	硬件信息、显卡型号工具、显卡驱动参考、显示模式检测、游戏安全诊断、网络测试
恢复与维护	软件备份、系统还原点入口、修复中心、配置包、启动项管理、电源方案编辑
进程工具	CPU 核心调度、亲和性和优先级管理；需要相应权限并由用户明确选择进程
持续保持	轻量守护助手只维护已经应用且符合安全恢复规则的项目，不会自动处理所有优化项
可理解反馈	部分读取、权限不足、平台不支持、检测中断和应用未确认均使用不同状态说明

功能数量不是效果保证。不同电脑能够读取、应用或持续保持的项目数量可能不同。

下载安装

前往 GitHub Releases 下载最新体验版。国内用户也可使用作者提供的 夸克网盘备用下载。

顶部下载量徽章只统计 GitHub Releases 的累计文件下载次数，不包含夸克网盘，也不代表安装人数、活跃用户数或独立用户数。

版本	适合谁	使用方法
安装版（中英文双语）	希望创建开始菜单/桌面入口的用户	启动安装程序后先选择中文或 English，再按向导安装
ZIP 免安装版（中英文双语）	希望解压即用或便于测试的用户	完整解压 ZIP 后运行 `YuqiEngine.exe`，不要直接在压缩包内启动

安装版和 ZIP 版功能一致，软件内均可切换中文与 English。部分系统级功能需要管理员权限；不需要相关权限的查看和检测入口仍可正常使用。

为什么安装包比较大

当前发布包约 530 MB，主要因为包含：

自包含 .NET 8 运行环境；
WebView2 离线安装组件；
完整功能模块、中英文资源和前端界面；
备份恢复、诊断和持续保持助手。

这样可以减少用户额外安装依赖时遇到的问题。后续会在不破坏离线可用性的前提下逐步进行组件精简和体积优化。

校验下载文件

Release 会同时提供 SHA-256 文件。可在下载目录打开 PowerShell，执行：

Get-FileHash -Algorithm SHA256 -LiteralPath '.\下载的文件名.exe'

ZIP 文件把扩展名改为 .zip。终端结果必须与同版本 SHA-256 文件完全一致。校验值只能确认文件完整性，不能代替代码签名。

系统要求

项目	要求
操作系统	Windows 10 1809（Build 17763）及以上 / Windows 11
架构	x64（64 位）
内存	4 GB 以上，建议 8 GB 或更多
磁盘	建议预留至少 1 GB，用于程序、更新、日志和备份
WebView2	发布包附带离线安装组件；缺失时软件会引导安装
权限	检测与只读功能通常无需提升；修改系统设置、服务、注册表或电源配置时可能需要管理员权限

使用前必读

先阅读项目说明。 展开优化项摘要和详情，确认作用、风险、目标位置与恢复方式。
先创建备份。 建议同时创建宇奇引擎备份和 Windows 系统还原点。
少量应用并复测。 不要一次启用大量不了解的项目；用自己的游戏和工作场景验证效果。
只保留真正有帮助的修改。 没有改善、出现兼容问题或无法确认时，应恢复对应项目。

Warning

宇奇引擎的备份用于保存软件相关设置、注册表项和恢复证据，不是完整系统镜像，也不会备份个人文档、照片、视频或游戏存档。重要个人文件仍需自行备份。系统还原点和重装 Windows 也不能替代个人数据备份。

状态应该怎么理解

状态	含义
已确认	已读取到当前系统状态，可以继续判断是否符合目标
读取中	系统仍在返回状态，数量会随进度变化
待确认	尚未得到可靠复核结果，不能当作已应用
不可用	当前权限、系统版本、硬件或依赖条件不满足；详情会说明原因
已应用 / 已恢复	本次操作已返回结果；仍建议按页面提示进行复测或重新读取
部分完成	只有部分项目完成，其余项目应按结果列表单独处理

真实界面

系统概览

查看游戏优化中心

查看持续保持助手

截图来自当前 v0.1.1 实际运行界面。项目状态和数量取决于截图设备，不代表所有电脑都会得到相同结果。

安全、恢复与限制

软件会尽量区分检测、选择、应用、复核和恢复，不把“已提交”当成“已成功”。
权限不足、系统策略、驱动、硬件差异或安全软件拦截都可能导致部分功能不可用。
优化可能改善部分设备的响应、帧时间或后台干扰，也可能没有明显变化，甚至产生兼容问题。
持续保持助手只处理用户已经应用、支持自动恢复且通过安全条件的项目；它不是后台强制写入全部设置的服务。
恢复前会重新读取当前状态；无法确认时不会假装恢复成功。
若发生问题，优先使用软件备份或 Windows 系统还原点。重装 Windows 应作为最后手段，并且必须先备份个人数据。
当前体验版未使用受信任代码签名证书。请只从本仓库 Release、作者公布的网盘或作者账号获取文件，并核对 SHA-256。

问题反馈

如果遇到“未应用”“状态读取不完整”“页面异常”“某项在特定设备不可用”等问题，请不要只发送一句“不能用”。推荐流程：

什么是问题包

问题包是软件在本地生成的故障排查 ZIP 文件，用来帮助作者了解“哪台电脑、哪个模块、发生了什么错误”。它不是优化备份，也不是系统镜像。

问题包会按当前实际情况收集并整理：

宇奇引擎版本、Windows 版本、系统架构和基础硬件环境；
软件运行日志、页面与启动诊断信息；
最近的优化、恢复和错误记录；
经过脱敏处理的软件配置；
软件崩溃，以及可读取到的黑屏、重启和 Windows 事件证据。

软件会对用户名、计算机名、路径和日志中的敏感字段进行脱敏，并且只在本地生成 ZIP，不会自动上传或发送给任何人。它不会主动收集个人文档、照片、视频或游戏存档。为稳妥起见，发送前仍应自行打开 ZIP 检查内容，不要发送密码、Token、聊天记录或其他隐私资料。

生成成功后，软件会显示问题包的保存位置。你可以把这个 ZIP 连同截图和复现步骤，通过 GitHub Issues、抖音私信或 Bilibili 私信发给作者。

打开软件的 备份管理；
点击 生成问题包；
同时提供问题截图、出现问题的模块、操作步骤和 Windows 版本；
通过 GitHub Issues、抖音私信或 Bilibili 私信提交。

报告问题时建议使用下面的格式：

宇奇引擎版本：
Windows 版本：
设备 CPU / GPU：
问题模块：
操作步骤：
实际结果：
期望结果：
是否可以稳定复现：
问题包：已附上 / 无法生成

常见问题

软件能保证提升 FPS 吗？

不能。效果取决于硬件、散热、驱动、Windows 版本、游戏和原有设置。请用自己的实际游戏复测，只保留确实有帮助的修改。

为什么有些项目显示待确认或不可用？

软件没有拿到可靠状态，或者当前设备、权限、系统版本和依赖条件不满足。展开详情或使用“重新读取”可以查看具体原因；未确认项目不会参与应用。

为什么 Windows 显示未知发布者？

当前版本由个人独立开发者发布，暂未购买受信任的商业代码签名证书。请通过官方渠道下载并核对 Release 中的 SHA-256。

杀毒软件提示风险怎么办？

不要直接关闭安全软件或无条件加入白名单。先确认下载渠道和 SHA-256；如果仍有拦截，请提交检测名称、文件哈希、软件版本和问题包供分析。

持续保持助手会保持所有优化吗？

不会。只有已经应用、支持安全自动恢复并被用户启用持续保持的项目才会进入助手；不适合后台恢复的项目会被排除。

后续计划

扩大不同 CPU、GPU、Windows 版本和驱动环境的验证覆盖；
根据真实问题包继续修复状态读取、兼容性和恢复链路；
完善功能说明、中英文文案和可访问性；
在条件允许时补充可信代码签名；
评估更小的在线/精简发布方案，同时保留完整离线版本。

具体优先级会根据可复现问题、风险和用户反馈调整，不承诺固定发布日期。

仓库与源码说明

当前公开仓库主要用于发布官方说明、版本下载、更新记录和问题反馈。仓库公开可见不代表当前软件源码已经公开，也不代表授予复制、修改、重新打包或商业使用权限。

如后续开放部分源码、工具或接口，会在对应目录中单独提供明确的许可证和适用范围。在没有许可证的情况下，请勿默认相关内容属于开源授权。

作者与官方渠道

两个平台名称不同，但均为同一位作者：

抖音：智宇（抖音号 35071658）— 作者主页
Bilibili：智宇丶817（UID 41173761）— 作者主页
GitHub：ZYY817 — 项目主页
夸克网盘备用下载 — 作者公布链接

宇奇引擎永久免费，禁止倒卖。转载、网盘再次分发、重新打包、捆绑其他内容、修改后传播或用于引流获利，必须先取得作者明确授权。请勿冒充作者或官方版本。

宇奇引擎 · Yuqi Engine
_{先理解，再选择；可验证，也可恢复。}

AumGupta/abyss-jellyfin

Minimal Dark Theme for Jellyfin [Customisable]

Abyss for Jellyfin

A clean and minimal theme for Jellyfin with frosted glass surfaces, refined typography, smooth animations and a minimal design language that re-skins JellyFin almost exhaustively. Video Demo

Demo Video

Preview

See full preview

Features

One-click installer: abyss-setup-vX.X.X.exe (Windows) and abyss-setup-vX.X.X.sh (Linux) configure your entire Jellyfin instance, CSS, dashboard theme, home section order, and Spotlight, all automatically. The theme selector in display settings becomes locked to Dark after installation, which is intentional and expected.
Spotlight home banner: a cinematic banner on your home screen showing your current Continue Watching item, complete with backdrop image, metadata pills (rating, runtime, score), and a resume play button.
Frosted glass UI: header, drawer, dialogs, toasts, and footer all use backdrop-filter blur for a layered, depth-rich interface
Refined typography: Google Sans throughout, with consistent weight and spacing
Smooth transitions and animations: every interaction uses carefully tuned cubic-bezier easing. Home sections animate in with a staggered fade-up entrance on load. The favourite (heart) button has a spring pop animation.
Floating sidebar: pill-shaped drawer with rounded corners and a snappy slide animation
Pill tab bar: active tab highlighted with a filled pill indicator
Every element targeted: styling covers cards, indicators, sliders, checkboxes, form inputs, the media player OSD, now playing bar, chapter thumbnails, search page, cast thumbnails (9 responsive breakpoints), login page, detail pages, metadata manager, and the admin dashboard
Responsive: mobile layout tweaks, ultrawide support, and cast thumbnail scaling across all breakpoints
Customisable: three CSS variables let you retheme without touching the rest of the file

Installation

Linux & MacOS

Download the latest abyss-setup-vX.X.X.sh from the Releases page and run it:

chmod +x abyss-setup-vX.X.X.sh
sudo ./abyss-setup-vX.X.X.sh

Note

Requires curl and python3, which are available by default on most Linux distributions.

For detailed steps go to the Setup Guide.

Windows

Download the latest abyss-setup-vX.X.X.exe from the Releases page and run it. The installer will:

Apply the Abyss CSS to your Jellyfin server automatically
Set the dashboard theme to Dark
Configure your home screen sections in the correct order
Install the Spotlight add-on (cinematic home banner)
Restart Jellyfin when done

For detailed steps go to the Setup Guide.

Note

If you are on Windows. Windows SmartScreen may show a warning! It is completely normal, the setup is 100% safe. Click More info then Run anyway. This happens because the installer is new and hasn't yet built a download reputation with Microsoft.

Why is this safe to run?

The installer (abyss-setup.exe) is automatically compiled from setup.ps1 via GitHub Actions on every release. You can read every line of setup.ps1 before running, it is plain PowerShell with no obfuscation.

The installer will ask for your Jellyfin server URL, admin username, and admin password. These are sent directly to your own local Jellyfin server using the standard Jellyfin API, the same API your browser uses when you log in. Nothing is sent to any external server. The credentials are used only to authenticate and apply theme settings, and are never stored anywhere.

The build process is fully transparent and auditable, click through to the Actions log to see exactly which commit produced the exe you downloaded.

Docker Install

The steps to install Abyss inside a docker container can be found in the detailed SETUP guide.

Manual Install

The steps to apply Abyss entirely manually can be found in the detailed SETUP guide.

Quick Preview:
@import url('https://cdn.jsdelivr.net/gh/AumGupta/abyss-jellyfin@main/abyss.css');
Copy and Paste in the branding section in your jellyfin dashboard.

Note

The quick preview import given above is useful only to have a look at how the theme looks, but to actually get the full feel of Abyss, follow all the steps in the SETUP guide.

Plugin Support

If you use additional plugins, like Jellyfin Enhanced, Media Bar Enhanced, etc, then you can follow the Plugin Support steps in the SETUP.md guide.

Customisation

Override any of these variables at the top of your Custom CSS field, after the @import line:

@import url('https://cdn.jsdelivr.net/gh/AumGupta/abyss-jellyfin@main/abyss.css');

:root {
    /* Accent colour: R, G, B only, no rgb() wrapper */
    --abyss-accent: 245, 245, 247;   /* default: near-white */

    /* Corner rounding applied globally */
    --abyss-radius: 24px;            /* default: 24px */

    /* Episode count / indicator pill background */
    --abyss-indicator: 55, 55, 55;   /* default: dark grey */
}

Example accent colours

Look	Value
Default (near-white)	`245, 245, 247`
Warm white	`255, 250, 240`
Soft blue	`100, 160, 255`
Teal	`50, 200, 180`
Rose	`255, 100, 120`

Lite mode

For lower-power mobile, TV, and embedded clients, import the optional Lite override after the main theme:

@import url('https://cdn.jsdelivr.net/gh/AumGupta/abyss-jellyfin@main/abyss.css');
@import url('https://cdn.jsdelivr.net/gh/AumGupta/abyss-jellyfin@main/styles/abyss-lite.css');

Lite mode keeps the same colours, typography, spacing, and component styling while reducing blur, shadows, and entrance motion.

NOTE:

You can also change the font by adding a Google Fonts (or any other source) @import and overriding the body font-family after your theme import. For example, to use Inter:
@import url('https://cdn.jsdelivr.net/gh/AumGupta/abyss-jellyfin@main/abyss.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

body {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "GRAD" 0;
}
Browse fonts at fonts.google.com and replace "Inter" with any family name you pick.

Compatibility

Jellyfin version	Status
10.11.x	Tested
10.10.x	Should work
Earlier	Untested

Important

Abyss is built and tested for the Jellyfin web client accessed via a desktop browser. The mobile web experience includes layout tweaks but is not the primary focus. The Jellyfin desktop app (Jellyfin Media Player) and TV clients may work but are not specifically targeted and results may vary.

Notes

The Jellyfin admin dashboard (/dashboard) is a separate React app and does not load Custom CSS. Abyss styles the main client only (home, libraries, detail pages, player).
Backdrop blur requires backdrop-filter support: Chrome, Edge, Safari, and Firefox 103+.
The theme selector in display settings will appear locked (greyed out) after installation via the installer, this is intentional. Abyss requires the Dark base theme to display correctly.

Contributing

Pull requests are welcome. For suggestions, feature requests, or bug reports, open an issue on the Issues page. Please include your Jellyfin version and a screenshot where relevant.

License

Abyss is licensed under the MIT License.

ConardLi/garden-skills

ConardLi's open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.

Garden Skills

A curated collection of production-ready Agent Skills for Claude Code, Cursor, Codex, and other AI coding agents.

web-video-presentation _{Web video / presentation}	web-design-engineer _{Design / frontend}
gpt-image-2 _{Image generation / prompting}	beautiful-article _{Any source → beautiful article}

English · 中文文档 · 日本語

Install	Use	Contribute
Install `skills` CLI (npx) Claude Code plugin marketplace Pinned `.zip` from Releases Manual copy Git submodule	Compatibility What is a Skill?	Contributing Acknowledgments License

`web-video-presentation`

Category: Web Video / Presentation Engineering
Best for: turning scripts, articles, lessons, product demos, and talks into click-driven 16:9 web presentations that can be screen-recorded as cinematic videos.

web-video-presentation builds record-ready Vite + React + TypeScript presentations that behave like video production surfaces. The workflow turns raw articles into narration scripts, maps script beats to full-screen scenes, pauses at required checkpoints, and can optionally synthesize narration audio after the visual outline is approved.

Highlights:

Fixed 1920×1080 stage that scales to the viewport for stable screen recording
Click / keyboard driven (chapter, step) cursor, with one narration beat per visual step
Hard collaboration checkpoints for script, theme, outline, implementation mode, and optional audio
Hidden hover-only progress controls so the stage stays clean while recording
Theme-token architecture with 23 built-in themes, each with its own design signature — editorial, terminal, engineering, Swiss International, and more
Pluggable TTS — provider-agnostic audio runner; ships two built-in providers (MiniMax mmx-cli + OpenAI TTS via curl) plus a contract + ready-to-paste snippets for ElevenLabs / edge-tts / Azure / Google Cloud / macOS say
Scaffolded Vite + React + TypeScript project with reusable stage primitives and recording guidance

_{creative-voltage
creative talks} _{blueprint
tech architecture} _{swiss-ikb
data reports} _{chalk-garden
popular science}

_{↑ All 23 themes at a glance — open the full gallery for live 16:9 previews, design signatures, and best-for tags.}

Links: README · SKILL.md · Download v1.2.2 .zip

`web-design-engineer`

Category: Design / Frontend
Best for: web pages, landing pages, dashboards, interactive prototypes, HTML slide decks, animations, UI mockups, data visualizations, and design-system explorations.

web-design-engineer turns AI-generated web artifacts from merely functional into polished, deliberate, and visually memorable front-end work. It treats the agent as a design engineer: first understanding product context, then declaring a design system, showing an early v0, building the full experience, and verifying the result.

Highlights:

Converts the brief into a five-dial Design Read covering variance, motion, density, asset dependence, and brand fidelity
Distinguishes extension, preserve, and overhaul redesign modes before changing an existing product
Runs executable browser acceptance only when the user explicitly requests acceptance, QA, or browser testing
Pushes beyond generic AI UI patterns with an anti-cliché blocklist and stronger visual judgment
Ships a Design Direction Advisor (six differentiated schools) + 25 anchored style recipes (Linear / Aesop / Pentagram / Bloomberg / Stripe Press / Mid-Century, etc.) — each recipe carries concrete palette, typography, signature moves, and anti-patterns ready to paste into the design-system declaration
Covers HTML / CSS / JavaScript / React prototypes, with guidance for responsive layout, motion, and interaction polish
Includes practical implementation rules for inline React + Babel, CSS tokens, oklch() color work, container queries, and reduced-motion handling
Ships an advanced patterns reference for device frames, slide engines, animation timelines, dashboards, and other reusable web artifacts

_{aesop apothecary pages}	_{muji-kenya-hara object catalogues}	_{monocle-magazine magazine contents}	_{stripe-press book detail}
_{bloomberg-terminal trading dashboards}	_{linear dev tool landing}	_{vercel-mesh deploy hero}	_{tufte-dataink data narratives}
_{mid-century-modern poster homage}	_{y2k-retrofuturism Y2K portal}	_{businessweek-turley editorial covers}	_{active-theory cinematic launch}

_{↑ 12 of 25 anchored recipes — open the full gallery for all 25 working artefacts (apothecary pages, trading workstations, magazine covers, Y2K portals, mid-century posters …) with signature moves and best-for tags.}

Links: README · SKILL.md · Website · Demo · Download v1.3.0 .zip

`gpt-image-2`

Category: Image Generation / Prompt Engineering
Best for: posters, UI mockups, product visuals, infographics, academic figures, technical diagrams, comics, avatars, storyboards, branding boards, and image-editing workflows.

gpt-image-2 is a focused image-generation skill for GPT Image 2 and OpenAI-compatible image APIs. It is designed to work across different agent environments: fully local Garden generation, host-native image-tool delegation, or prompt-only advisor mode when no image tool is available.

Highlights:

Supports three runtime modes: Mode A Garden local, Mode B host-native delegation, and Mode C advisor-only prompt writing
Starts every task with mode detection so the skill does not silently choose the wrong execution path
Provides 18 visual categories and 79 structured prompt templates under references/
Covers both image generation and image editing through dedicated workflows and scripts
Saves prompts and generated images under garden-gpt-image-2/ in Garden mode for reuse, review, and versioning

Selected live cases

`background-replacement` _{Portrait edit with Times Square relighting.}	`chat-interface-scene` _{Claude-style assistant product screenshot.}	`live-commerce-ui` _{Celebrity livestream commerce interface.}	`product-card-overlay` _{Skincare landing-page hero.}
`bento-grid-infographic` _{High-density iPhone 16 Pro explainer.}	`system-architecture` _{Multi-tenant AI SaaS production diagram.}	`dense-explainer-slides` _{AI Agent mechanism in one page.}	`food-map` _{City-walk editorial food guide.}
`exploded-view-poster` _{Vision Pro 2 optical and compute teardown.}	`neural-network-architecture` _{ViT-B/16 model figure for papers.}	`cosmetic-packaging` _{Premium skincare gift-box composition.}	`anime-key-visual` _{Game-launch key art with crop-safe layout.}

_{↑ 12 selected cases from the 160+ public case library — open the skill gallery for more templates, or browse the live website.}

Links: README · SKILL.md · Website · Download v1.0.4 .zip

`kb-retriever`

Category: Retrieval / Local Knowledge Base
Best for: answering questions from a local knowledge/ directory, searching structured documentation, and extracting evidence from Markdown, text, PDF, and Excel files without flooding the agent context.

kb-retriever is a local knowledge-base retriever built around careful, progressive search. Instead of loading whole files, it navigates hierarchical index files, narrows the candidate set, processes complex file types correctly, and answers with sources.

Highlights:

Uses layered data_structure.md files to navigate the knowledge base before searching content
Enforces a learn-before-process rule for PDF and Excel files, using the included reference docs before extraction or analysis
Combines precise keyword search, local windowed reads, synonyms, and iterative refinement
Bounds retrieval to at most 5 search rounds so exploration stays controlled
Includes workflows for grep, pdftotext, pdfplumber, and pandas, with source-aware answer formatting

Links: README · SKILL.md · Download v1.0.1 .zip

`beautiful-article`

Category: Editorial · Any source → beautiful article
Best for: turning URLs, PDFs, DOCX, Markdown, plain text, screenshots, and pasted notes into a polished, share-ready article — long-form, briefings, explainers, tutorials, post-mortems, visual essays, dialogue transcripts.

beautiful-article is an editorial harness skill: it does not just "make a webpage", it edits and designs the source material into a polished article that is easier to read, share, and archive than the original. The skill flows through a small source → plan → double-confirmation → build → final review → repair loop and pauses at three hard checkpoints so the user keeps editorial control over article type, theme, layout, image strategy, cover, and delivery format.

Highlights:

Article first — the focus is the article: better reading, better pacing, better aesthetics. Delivery is a self-contained file (HTML, optional PDF), but that's a delivery detail, not the goal
Reacticle component protocol — prose-first semantic components (Hero / Lead / Section / Quote / Callout / Image / Formula / CodeBlock / Table…) plus a theme-token-only Raw free layer; the underlying React library lives at ConardLi/reacticle
10 article types with bundled retention ratios — longform · ~100% / tutorial · ~90% / full-report · ~80% / explainer · ~80% / dialogue · ~80% / review · ~70% / essay · ~70% / briefing · ~50% / visual-essay · ~40% / interactive-explainer · ~25% excerpt + 75% AI-rebuild
11 authoring theme profiles (tufte, press, bayer, bodoni, vignelli, sottsass, freddie, andy, fuller, knuth, shannon) — each is a Markdown contract for the agent rather than a CSS file
Hard collaboration checkpoints with item-by-item decision capture (no silent defaults), plus a 3:4 book-style cover, default-on TOC, and language-aware translation step
Per-node quality protocol — main-agent inline checks for plan, sub-agent reviewers for first spread / sections / final review, repair as minimal slices

Theme gallery

_tufte	_press	_bayer	_bodoni
_vignelli	_sottsass	_freddie	_andy

Links: README · SKILL.md · Download v0.1.0 .zip

Install

There are five supported install paths. Pick the one that fits your stack:

#	Method	Best for	Pinned version?
A	`skills` CLI (`npx skills add`)	Any agent, one-line install, pick & choose skills	✅ via tag URL
B	Claude Code plugin marketplace	Claude Code users who want to subscribe to plugin packs	✅ via marketplace version
C	Pinned `.zip` from GitHub Releases	CI / air-gapped envs / reproducible installs	✅ ✅ (immutable)
D	Manual copy after `git clone`	Local hacking on the skill itself	❌ (tracks `main`)
E	Git submodule	Vendored into a larger project, want upstream updates	✅ via submodule SHA

Each skill section above also has a Download v<version> .zip link in its "Links:" row that points at the current pinned release artifact. Those URLs are auto-rewritten by scripts/release/update-readme.mjs on every release, so they always advertise the latest immutable version.

Option A · `skills` CLI (npx)

The fastest agent-agnostic path. Uses the standard npx skills CLI, which auto-detects your agent (Claude Code, Cursor, Codex, etc.) and drops the skill into the right directory.

# Install all four skills (latest)
npx skills add ConardLi/garden-skills

# Install just one skill (latest)
npx skills add ConardLi/garden-skills -s web-design-engineer

# Install globally (~/.skills) instead of per-project (./.skills)
npx skills add ConardLi/garden-skills -s gpt-image-2 --global

# Target a specific agent
npx skills add ConardLi/garden-skills -s kb-retriever -a claude-code

Defaults to the latest commit on main. That's what you want 95% of the time — the CLI tracks each skill's most recent published SKILL.md straight from the source tree.

Want a pinned version? (CI / production) Use a tag-scoped tree/ URL — this points at the exact commit a release was cut from:

# Pin one skill to a specific release
npx skills add ConardLi/garden-skills/tree/web-design-engineer-v1.0.0/skills/web-design-engineer

For each skill, the current pinned .zip URL is also shown inline in its "Links:" row above (the Download v<version> .zip link).

Useful sub-commands:

npx skills list                 # what's installed
npx skills find web-design      # search registries
npx skills update               # bump everything
npx skills remove kb-retriever  # uninstall

Option B · Claude Code plugin marketplace

If you use Claude Code, you can subscribe to the marketplace and install plugin packs that bundle one or more skills together:

/plugin marketplace add ConardLi/garden-skills
/plugin install presentation-skills@garden-skills
/plugin install web-design-skills@garden-skills
/plugin install knowledge-base-skills@garden-skills
/plugin install image-generation-skills@garden-skills

Plugin packs are declared in .claude-plugin/marketplace.json:

Plugin pack	Skills included
`presentation-skills`	`web-video-presentation`
`web-design-skills`	`web-design-engineer`
`knowledge-base-skills`	`kb-retriever`
`image-generation-skills`	`gpt-image-2`

Option C · Pinned `.zip` from Releases

Every formal release publishes an immutable .zip (with a SHA-256 checksum) to GitHub Releases. Pin to this from CI, Dockerfiles, or air-gapped installers when you need the exact bytes to never move under you.

# Replace <skill> and <version> with the version you want.
SKILL=web-design-engineer
VERSION=1.0.0

curl -fsSL -o "${SKILL}.zip" \
  "https://github.com/ConardLi/garden-skills/releases/download/${SKILL}-v${VERSION}/${SKILL}-${VERSION}.zip"

# Verify the checksum (highly recommended for unattended installs)
curl -fsSL -o "${SKILL}.zip.sha256" \
  "https://github.com/ConardLi/garden-skills/releases/download/${SKILL}-v${VERSION}/${SKILL}-${VERSION}.zip.sha256"
shasum -a 256 -c "${SKILL}.zip.sha256"

# Drop the folder into the agent's skills directory
unzip -q "${SKILL}.zip" -d .claude/skills/   # or .agents/skills/, .codex/skills/, ...

A floating "always-latest" URL is also available — useful for one-off installs:

https://github.com/ConardLi/garden-skills/releases/latest/download/<skill>-<version>.zip

Pinned URLs for every skill are listed inline in this README — see the "Download" line under each skill's "Links" entry above. They are kept in sync automatically by the release pipeline.

Option D · Manual copy into your project

Clone the repo and copy the skill folder you want — handy if you want to fork or hack on the skill itself.

git clone https://github.com/ConardLi/garden-skills.git
cp -r garden-skills/skills/web-design-engineer  your-project/.claude/skills/
# Cursor / generic agent:
cp -r garden-skills/skills/web-design-engineer  your-project/.agents/skills/

The agent discovers the skill the next time it scans the workspace.

Option E · Git submodule

For vendoring into a larger project where you want to track upstream updates:

git submodule add https://github.com/ConardLi/garden-skills.git vendor/garden-skills
ln -s ../../vendor/garden-skills/skills/web-design-engineer .claude/skills/web-design-engineer

Pin to a release tag for reproducibility:

cd vendor/garden-skills
git checkout web-design-engineer-v1.0.0

Compatibility

Agent / Runtime	Skill location	Status
Claude Code	`.claude/skills/<name>/` or via plugin marketplace	✅ Tested
Claude.ai (web)	Settings → Capabilities → Skills	✅ Tested
Cursor	`.agents/skills/<name>/`	✅ Tested
Codex CLI	`.codex/skills/<name>/`	✅ Tested
Gemini CLI	extension manifest	✅ Tested
OpenCode	`.opencode/skills/<name>/`	✅ Tested

The SKILL.md format is portable by design — if your agent supports skills, copy the folder into the directory it scans, and it should work. PRs welcome to extend this matrix.

What is a Skill?

A Skill is a self-contained folder the agent can load on-demand. It's just a SKILL.md (YAML frontmatter + instructions), optionally accompanied by reference docs, scripts, and assets:

<skill-name>/
├── SKILL.md      ← required: when to use it + how to do it
├── README.md     ← human-facing docs
├── references/   ← optional: extended docs the agent loads on demand
├── scripts/      ← optional: deterministic executable helpers
└── assets/       ← optional: templates, fonts, icons

The agent decides whether to activate the skill from the description line in the frontmatter — so the description is the contract between you and the agent. For the full spec, see agentskills.io and Anthropic's reference repository.

Contributing

Bug reports, new skills, and tooling improvements are all welcome.

The maintainer-facing docs — repository layout, release process, version rules, CI workflow, troubleshooting — live in CONTRIBUTING.md (中文). Read that first if you want to add a skill or cut a release.

Quick orientation:

git clone https://github.com/ConardLi/garden-skills.git
cd garden-skills
npm run list      # show all skills + manifest status
npm run validate  # the same check CI runs on every PR

Acknowledgments

This collection stands on the shoulders of:

Anthropic for the Agent Skills spec and the anthropics/skills reference repository.
Claude Design — the system prompt that inspired web-design-engineer. The original is preserved in dist/prompt/claude-design-system-prompt.md for reference.
The broader OSS skill community — see travisvn/awesome-claude-skills and obra/superpowers for further discovery.

Connect

平台	账号名称	链接
X/Twitter	code秘密花园	https://x.com/GardenConardLi
B 站	code秘密花园	https://space.bilibili.com/474921808
抖音	code秘密花园	https://v.douyin.com/i5b33Xfv/
YouTube	code秘密花园	https://www.youtube.com/@garden-conard
小红书	code秘密花园	https://www.xiaohongshu.com/user/profile/5af45e78f7e8b903d6e04618
公众号	code秘密花园	https://cdn.jsdelivr.net/gh/ConardLi/easy-dataset@main/public/imgs/weichat.jpg
GitHub	ConardLi	https://github.com/ConardLi
个人网站	Easy AI	https://mmh1.top

License

MIT © ConardLi

hkhcoder/vprofile-project

Prerequisites

JDK 17 or 21
Maven 3.9
MySQL 8

Technologies

Spring MVC
Spring Security
Spring Data JPA
Maven
JSP
Tomcat
MySQL
Memcached
Rabbitmq
ElasticSearch

Database

Here,we used Mysql DB sql dump file:

/src/main/resources/db_backup.sql
db_backup.sql file is a mysql dump file.we have to import this dump to mysql db server
mysql -u <user_name> -p accounts < db_backup.sql

troxler/awesome-css-frameworks

List of awesome CSS frameworks in 2026

Awesome CSS Frameworks

List of awesome CSS frameworks.
Feel free to contribute.

Are you looking for React/Vue/Angular UI Component Libraries instead?

Base / Reset / Normalize

modern-normalize - Normalize browsers' default style.
Repo | #CSS
ress - Modern CSS reset.
Repo | #CSS
Natural Selection - Collection of best-practice CSS selectors.
| #CSS

Class-less

Frameworks that use semantic HTML and do not rely on classes.

Pico.css - Elegant styles for all native HTML elements, dark mode automatically enabled.
Demo, Docs, Repo | #SCSS
MVP.css - Minimalist stylesheet for HTML elements.
Docs, Repo | #CSS
sakura - Minimal classless CSS framework/theme.
Demo, Repo | #SCSS
Simple.css - Lightweight, classless CSS framework.
Demo, Docs, Repo | #CSS
Tacit - CSS framework for dummies, without classes.
Repo | #SCSS

Very Lightweight

Frameworks that are smaller than ~10KB.

Pure - Set of small, responsive CSS modules that you can use in every web project.
Demo, Docs, Repo | #CSS
Picnic CSS - Lightweight and beautiful library.
Demo, Docs, Repo | #SCSS
Chota - Really small CSS framework.
Demo, Docs, Repo | #CSS

General Purpose

Bootstrap - The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
Demo, Docs, Repo | #SCSS
Bulma - Modern CSS framework based on Flexbox.
Demo, Docs, Repo | #Sass
Foundation - The most advanced responsive front-end framework in the world.
Demo, Docs, Repo | #SCSS
UIkit - Lightweight and modular front-end framework for developing fast and powerful web interfaces.
Demo, Docs, Repo | #LESS #SCSS
Primer - CSS framework that powers GitHub's front-end design.
Docs, Repo | #SCSS
Carbon Components - Component library behind IBM's Carbon Design System.
Docs, Repo | #SCSS
U.S. Web Design System - Components used by U.S. federal government websites.
Docs, Repo | #SCSS
Fomantic-UI - Build beautiful websites fast, with concise HTML, intuitive javascript, and simplified debugging.
Docs, Repo | #LESS
Cirrus - Component and utility centric SCSS framework designed for rapid prototyping.
Demo, Docs, Repo | #SCSS
Vanilla Framework - Simple, extensible CSS framework. Written by the Canonical Web Team.
Demo, Docs, Repo | #SCSS
PatternFly - UI framework for enterprise web applications.
Demo, Docs, Repo | #SCSS #LESS
Stacks - UI components used by Stack Overflow.
Docs, Repo | #LESS
HiQ - Simple CSS foundation with responsive typography and input styling.
Docs, Repo | #PostCSS

Material Design

Beer CSS - Build material design interfaces in record time without stress for devs.
Repo | #CSS
Materialize - Responsive front-end library based on Google's Material Design.
Docs, Repo | #SCSS

Utility-based

Tailwind CSS - Utility-first CSS framework for rapid UI development.
Docs, Repo | #CSS
Open Props - CSS custom properties to help accelerate adaptive and consistent design.
Demo, Docs, Repo | #CSS #PostCSS

Specialized

NES.css - NES-style CSS Framework.
Demo, Docs, Repo | #SCSS
98.css - CSS library for building interfaces that look like Windows 98.
Repo | #CSS
Tufte CSS - Style your webpage like Edward Tufte’s handouts.
Repo | #CSS
Gutenberg - Modern framework to print the web correctly.
Demo, Docs | #SCSS
System.css - Design system for building retro Apple interfaces.
Repo | #PostCSS
XP.css - CSS library for building interfaces that look like Windows XP.
Repo | #PostCSS
TuiCss - Library to create MS-DOS interfaces.
Demo, Docs | #SCSS
7.css - CSS library for building interfaces that look like Windows 7.
Repo | #PostCSS
Bojler - Email framework for developing responsive and lightweight email templates.
Docs, Repo | #SCSS
Orbit - CSS framework designed for building any kind of radial UI.
Docs, Repo | #SCSS

Stalled Development

Frameworks that have not seen any real development for more than about one year or officially have been deprecated. We are keeping them here for reference/inspiration and hope for a revival.

Show Section

Semantic UI - User interface is the language of the web.
Docs, Repo | #LESS
Material Components Web - Modular and customizable Material Design UI components for the web.
Demo, Docs, Repo | #SCSS
Tachyons - Quickly build and design new UI without writing CSS.
Demo, Docs, Repo | #CSS
Bourbon - Lightweight Sass tool set.
Docs, Repo | #SCSS
Water.css - Just-add-CSS collection of styles to make simple websites just a little nicer.
Repo | #CSS
sanitize.css - The best-practices CSS foundation.
Repo | #CSS
modern-css-reset - Tiny little reset that you can use as the basis of your CSS projects.
Repo | #CSS
minireset.css - Tiny modern CSS reset.
Repo | #Sass
CSS Remedy - Start your project with a remedy for the technical debt of CSS.
| #CSS
Blaze UI - Open source modular toolkit providing great structure for building websites quickly with a scalable and maintainable foundation.
Demo, Docs, Repo | #SCSS
Concise CSS - Give up the bloat. Stop tripping over your classes. Be concise.
Docs, Repo | #SCSS
Responsive Boilerplate - Powerful, accessible, developer friendly framework for building responsive websites.
Docs, Repo | #SCSS

License

License CC0 1.0:

You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission.

Images of GitHub stars are provided by Shields.

lscambo13/ElegantFin

A Jellyfin theme inspired from Jellyseerr. This theme improves the overall look and experience with various little fixes to the UI/UX.

⭐ ElegantFin Theme

This is a Jellyfin theme inspired from Jellyseerr to improve the overall look and experience with various fixes to the UI/UX. It gives Jellyfin a fresh, modern look, and it aims to work on mobile, desktop, and TV, with just one import.

Author: lscambo13

✨ Key Features

modern layouts and color tones
new and improved animations on most elements
rounded corners and even spacing everywhere
stylish borders, hover effects and shadows
neat layout that puts important stuff up front
reduced unnecessary clutter
various fixes to improve the user experience
same clean design across phone, desktop, and TV

🖼️ Theme Showcase

Captured on ElegantFin v25.08.02

💻 Desktop and 📱 Mobile Screenshots

Desktop	Mobile
Login Page
Homepage
Movies Library
Movie Page
Movie Details
TV Show Page
TV Episode Page
TV Show Seasons
Web Player
Cast Page
Artist Page
Music Player
Book Page
Sidebar
Extra Dialog
Settings Page
Metadata Menu
Dashboard Settings
Live TV Page
Live TV Guide

📺 TV Screenshots

TV View
Login Page
Homepage
Movies Library
Movie Page
Extra Dialog
Settings Page
Web Player
TV Show Page
Movie Details
Book Page
Artist Page
Music Player
TV Show Seasons
Cast Page
TV Episode Page
Live TV Page
Live TV Guide

https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390

👇 How to install/setup this theme?

Paste the following in Custom CSS code box:

@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/ElegantFin-jellyfin-theme-build-latest-minified.css");

Detailed steps for server-side implementation

Open Dashboard from Administration tab in Settings.

From the side bar, select the Branding tab if you are on Jellyfin 10.11 or above.

Scroll down to find Custom CSS code box.

Paste the custom css in Custom CSS code box.

Click save

Detailed steps for client-side implementation

Open Display tab in Settings.

Scroll down to find Custom CSS code box.

Paste the custom css in Custom CSS code box.

Click save.

🧩 How to customise this theme?

1. Custom media covers for user media libraries

Read more about this experimental add-on here

2. Custom background image for the login page

Note: this customisation is not needed on Jellyfin 10.11.X anymore

On older Jellyfin versions, to enable the background wallpaper on the login screen, first tick the 'Enable the splash screen' option in your Jellyfin Dashboard below the Custom CSS Box.
Second, copy and paste the following code at the end in Custom CSS box but don't save yet.
:root {
    --loginPageBgUrl: url("<YOUR-JELLYFIN-SERVER-ADDRESS>/Branding/Splashscreen?format=webp&foregroundLayer=1&quality=33&width=3840&height=2160&blur=2");
}
Third, replace <YOUR-JELLYFIN-SERVER-ADDRESS> with your Jellyfin server address, for example, http://192.168.0.1:8096.

Don't forget the correct http or https in your domain.

You can also modify the parameters, for example blur size or the resolution, according to your liking.

Once done, save and refresh your apps and webpages.

3. Enable or disable extra overlay buttons on cards on desktop

To enable 'Mark Played' and 'Add to Favorites' buttons that show up at the bottom right corner of cards while hovering, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
:root {
    --extraCardButtonsVisibility: block;
}
To hide the three-dot button that shows up next to these buttons, also include --menuButtonVisibility: none; in :root{}

To undo these changes, simply remove this code block or switch between block and none.

4. Place the overlay play button at the center of cards on desktop

To bring the mini play button to the center of cards, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
:root{
  --overlayPlayButtonPosition: 50%;
}
To undo this change, simply remove this code block or replace 50% with 2.8em.

5. Disable the card shinning effect on hover on desktop

https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
To disable the shine on cards that shows when hovering over them on desktop, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
:root{
  --cardHoverEffect: none;
}
To undo this change, simply remove this code block or replace none with "".

6. Enable labels below library cards

To enable text labels under the media library cards, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
:root{
--libraryLabelVisibility: block;
}
To undo this change, simply remove this code block or replace block with none.

7. Enable alternative style for the Media Bar plugin

ElegantFin does not support any plugins by default, so to to add external support for this plugin, copy and paste the following code right after the main import in Custom CSS box, click save and finally refresh your app/webpage.
@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/media-bar-plugin-support-latest-min.css");
To undo this change, simply remove this code block.

8. Switch between different app bar styles

https://github.com/user-attachments/assets/b5868cd2-8df9-490d-a2b6-4386c6ddcd56
You can switch between these using --appBarHeight.

Use 5em to enable the fading app bar (seamless) (default);
Or, use 4.6em to get the solid app bar (cleaner with border)
:root{
  /* example */
  --appBarHeight: 4.6em;
}
To undo this change, simply remove this code block.

9. Change to alternative color themes

Check out the the theme Playground page for different color themes.

You can also experiment and share your own take there if you wish.

10. Increase the size of Continue Watching cards so that they stand out

You can adjust their scaling --resumeCardScale.
Use any values over 1.0 to make them bigger.
:root{
  --resumeCardScale: 1.25;
}
To undo this change, simply remove this code block or set the value back to 1.

🆗 Tested on

Jellyfin Server v10.11.11
Microsoft Edge (Chromium)
Jellyfin Android App v2.6.3

🛠️ Troubleshooting

1️⃣ - How do I check which version of ElegantFin I am using?

Check the version number at the bottom in the Settings screen.

It should be something like ElegantFin v26.YY.ZZ.

2️⃣ - I see that a newer version is available, but I have not received it yet. Why?

If the Settings footer shows an old version, it means that you are still using an old cache.

Once that cache is updated, the new version will be loaded automatically.

There are multiple ways to clear the cache depending on your OS, smartphone or TV. Look online if you don't know.

On the web version, you can force a hard refresh of the page using CTRL + F5.

On apps, try signing out and back in again. OR in case of Jellyfin Media Player on windows, you might need to delete the cache folder.

3️⃣ - Why do I notice visual bugs and inconsistencies on Jellyfin Media Player?

JMP is based on Qt 5.x which uses a very outdated web engine. It does not support many new CSS features, so it is unsupported.

Jellyfin Desktop is the new official client moving forward. It seems to be in testing right now. Use it for better compatibility or use the web app instead.

4️⃣ - Does it work on the AndroidTV version of the Jellyfin app?

As of version 0.18.11, the official Jellyfin app on the AndroidTVs does not support css themes, but the Android mobile phone app supports them. The WebOS version of the app seems to be based on the mobile phone version, so it supports the theme just fine.

5️⃣ - All the icons on my LG TV seem to be broken. How to fix them?

It seems that modern Material Icons which this theme uses are not compatible on some WebOS TVs. There is a huge similar thread about this.

This bug can be fixed by using the older icons, so I have implemented the following workaround to bring back older, supported icons.
Simply add the following code at the end in Custom CSS box and save, then refresh your apps and webpages:
:root{
  --iconPack: 'Material Icons';
}

6️⃣ - How do I report bugs/issues?

First check here whether a similar issue has been reported already. If it exists, upvote and comment there to let me know.

Alternatively, create a new issue here.

7️⃣ - When can I expect another update?

🤷

📌 Contributing

Please read the Contributor Guidelines before opening pull requests.

This is a hobby project. If it helped you, your support really means a lot.

🙏 Feedback Appreciated

Please use the right template when creating an issue to report bugs or provide suggestions.

refact0r/system24

a tui-style discord theme

system24

a customizable, tui-style discord theme. inspired by spicetify text theme.

discord server

need help? want to get notified about updates? have feedback? join https://discord.gg/nz87hXyvcy

install

vencord/betterdiscord (or any client that supports theme files)

download the theme file, system24.theme.css. (there should be a download button at the top right of the page)
drag the file into your theme folder. (there should be a button to open the theme folder in theme settings)
(optional) customize the theme by editing the options in system24.theme.css.

install through link

add https://refact0r.github.io/system24/build/system24.css to your theme import links. you will need to copy the theme variables to your quickcss in order to customize the theme.

flavors

customized variants of the theme.

contributing

this theme depends on midnight for its core styles. if you're looking to contribute, please consider which theme you actually want to work on. feel free to open an issue and ask if you're unsure.

this theme uses a dev script to check for changes in the /src .css files and combine them into a build file in /build. note that both the /src files and the /build file are tracked in git, so any changes you contribute should exist in both places!!

to run locally:

clone the repository.
run npm i.
create a .env file in the project root with the paths of any local theme files you want to update (comma separated)

DEV_OUTPUT_PATH=C:\Users\USERNAME\AppData\Roaming\Vencord\themes\system24-dev.theme.css

run npm run dev.
make changes to any file in /src or the main theme file. the local theme files you listed will automatically be updated, along with the build file in /build.
make a pull request with your changes!

credits

spicetify text theme for primary design inspiration.

thanks to all the contributors!

devicons/devicon

Set of icons representing programming languages, designing & development tools

Devicon aims to gather all logos representing development languages and tools.

Demo · Request Icon · Contribute

TL;DR

<!-- in your header -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">

<!-- in your body -->
<i class="devicon-devicon-plain"></i>

About the Project

Devicon aims to gather all logos representing development languages and tools. Each icon comes in several versions: font/SVG, original/plain/line, colored/not colored, wordmark/no wordmark. Devicon has 150+ icons. And it's growing!

See the devicon.json or our website for complete and up to date reference of all available icons.

Thanks to all our contributors and the IcoMoon app. Devicon would not be possible without you.

_{All product names, logos, and brands are property of their respective owners. All company, product and service names used in this website are for identification purposes only. Use of these names, logos, and brands does not imply endorsement. Usage of these logos should be done according to the company/brand/service's brand policy.}

Getting Started

For a super fast setup, go check devicon.dev.
You can either use the raw SVG icons, our Devicon font (which is also available via CDN), or by building Devicon yourself.

Use the `devicon` font (recommended)

You can install devicon as a dependency to your project either with npm or yarn:

npm install --save devicon
yarn add devicon

If you don't want to use a package manager, you can also download and include devicon.min.css next to the font files to your project. See devicon.dev for details about how to add Devicon to your project via a CDN.

After setting up you just have to include the stylesheet in your header to get started:

<link rel="stylesheet" href="devicon.min.css">

Start using icons with <i>-tag:

<!--  for devicon plain version -->
<i class="devicon-devicon-plain"></i>

<!--  for devicon plain version with wordmark -->
<i class="devicon-devicon-plain-wordmark"></i>

<!--  for devicon plain version colored with devicon main color -->
<i class="devicon-devicon-plain colored"></i>

<!--  for devicon plain version with wordmark colored with devicon main color -->
<i class="devicon-devicon-plain-wordmark colored"></i>

An alternate way to use devicon is by copy/pasting the raw SVG code to your project.

Copy/paste SVG code (from the SVG folder or the project page):

<!--  for devicon plain version -->
<svg id="Devicon" class='devicon-devicon-plain' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path id="plain" fill="#60be86" d="M64,7.83H4.77L14.95,95.13l49,25,.06,0,49.07-25L123.23,7.83Zm42.77,54.86c0,.88,0,1.67-.77,2L73.25,80.44l-2.42,1.13-.27-3.15V72.23l.24-1.57,1.09-.47L95.07,59.81l-21.54-9.6L64.35,68.34,58.9,78.87l-1.22,2.27-2.05-.9L22,64.71a2.42,2.42,0,0,1-1.45-2V56.91a2.39,2.39,0,0,1,1.42-2l34-15.73,3.21-1.44v9.66l.24,1.34-1.56.7L34.45,59.79,56.3,69.42l8.05-16,6.21-12.65,1.13-2.28,1.81.91L106,54.89c.73.35.76,1.14.76,2Z"/></svg>

Add the following CSS rules in your stylesheet:

.devicon-devicon-plain {
  max-width: 2em;
}

/* if you want to change the original color */
.devicon-devicon-plain path {
  fill: #4691f6;
}

You can also use the `img` tag and reference an SVG directly from the repository:

<img src='https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/devicon/devicon-original.svg' />

Requesting an icon

When you want to request an icon please feel free to create an issue. Check out our Wiki for more information.

Contributing

We are happy with every contribution, whether it's new icons, features, or maintainers. Please have a look at our Wiki to see how you can contribute to this project.

Discord community

We have a Discord community for Devicons. You can easily request icons, discuss, and have a good time talking with the community members! Join the official Discord Server here!

`develop` vs `master`

All official releases shall be in master. Any updates in between (icons, features, etc.) will be kept in develop.

develop contains:

Latest SVGs (non-optimized).
No icons for the latest SVGs. These will be built at every release.
Can be built manually. See Building Devicon.
Experimental changes.

master contains:

Latest official release, which contains all the SVGs and icons.
Official, tested changes.

Stale Pull Requests

After a pull request has been open for over 30 days with no activity or response from the author, it'll be automatically marked as stale. We might fork your changes and merge the changes ourselves. Since GitHub tracks contributions by commits, you will be credited.

Building Devicon

Follow these steps to build the website and icons either locally or using Gitpod.io.

Using Gitpod.io

By using Gitpod.io, you can easily build the icons and install the
required dependencies in one single click. No extra setup is required.

Note In case some of the commands are not properly ran, you can
follow the steps below and run the same commands on Gitpod.io

Local Installation

Install dependencies

Fork the repository and clone the forked repository.

git clone https://github.com/<your-github-username>/devicon.git

Note In case you don't have Git installed, check the official guide to install Git on your operating system.

Install all the necessary NPM dependencies

npm install

Note In case you don't have NPM installed, check this ultimate guide on installing Node.js and NPM. These tools are required in order to build Devicon properly.

Install Firefox

https://www.mozilla.org/en-US/firefox/new/

Install Python 3.8

https://www.python.org/downloads/

Note Make sure your Python install includes pip

Install Dependencies

python -m pip install -r ./.github/scripts/requirements.txt

Build the new icons

Once all the dependencies are installed, you can proceed to build the newest icons.
Usually, this is done on each release, but you can have a sneak peek before a release.

npm run build-icons

The process might take a while, depending on your operating system's speed and the amount of icons.

If there are any errors shown, please let us know by creating an issue or contacting us on our Discord community.

Build the CSS stylesheet

Run the following command to build the new CSS stylesheet.
This file is used to show all the new icons previously built.

npm run build-css

Setting up the web server

Run the following command to start the web server with Python.

npm run dev # Will run on port 8000

Or this command, which does exactly the same, but the port can be customized.

python -m http.server <port>

You're done now! 🎉 Your build of Devicons should be available at https://localhost:8000 (or the desired port).

bradtraversy/50projects50days

50+ mini web projects using HTML, CSS & JS

50 Projects in 50 Days - HTML/CSS and JavaScript

This is the main repository for all of the projects in the course.

Course Link

#	Project	Live Demo
01	Expanding Cards	Live Demo
02	Progress Steps	Live Demo
03	Rotating Navigation Animation	Live Demo
04	Hidden Search Widget	Live Demo
05	Blurry Loading	Live Demo
06	Scroll Animation	Live Demo
07	Split Landing Page	Live Demo
08	Form Wave	Live Demo
09	Sound Board	Live Demo
10	Dad Jokes	Live Demo
11	Event Keycodes	Live Demo
12	Faq Collapse	Live Demo
13	Random Choice Picker	Live Demo
14	Animated Navigation	Live Demo
15	Incrementing Counter	Live Demo
16	Drink Water	Live Demo
17	Movie App	Live Demo
18	Background Slider	Live Demo
19	Theme Clock	Live Demo
20	Button Ripple Effect	Live Demo
21	Drag N Drop	Live Demo
22	Drawing App	Live Demo
23	Kinetic Loader	Live Demo
24	Content Placeholder	Live Demo
25	Sticky Navbar	Live Demo
26	Double Vertical Slider	Live Demo
27	Toast Notification	Live Demo
28	Github Profiles	Live Demo
29	Double Click Heart	Live Demo
30	Auto Text Effect	Live Demo
31	Password Generator	Live Demo
32	Good Cheap Fast	Live Demo
33	Notes App	Live Demo
34	Animated Countdown	Live Demo
35	Image Carousel	Live Demo
36	Hoverboard	Live Demo
37	Pokedex	Live Demo
38	Mobile Tab Navigation	Live Demo
39	Password Strength Background	Live Demo
40	3d Background Boxes	Live Demo
41	Verify Account Ui	Live Demo
42	Live User Filter	Live Demo
43	Feedback Ui Design	Live Demo
44	Custom Range Slider	Live Demo
45	Netflix Mobile Navigation	Live Demo
46	Quiz App	Live Demo
47	Testimonial Box Switcher	Live Demo
48	Random Image Feed	Live Demo
49	Todo List	Live Demo
50	Insect Catch Game	Live Demo
51	Simple Timer	Live Demo

NOTE ON PULL REQUESTS: All of these projects are part of the course. While I do appreciate people trying to make some things prettier or adding new features, we are only accepting pull requests and looking at issues for bug fixes so that the code stays inline with the course

License

The MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

🔹 Software Disclaimer 🔹

🛠️ Provided "As Is" – No guarantees, use at your own risk. 📜 No Warranty – No promises on performance or fitness for any purpose. ⚖️ No Liability – Authors aren't responsible for any damages or claims. 🔄 Use Freely – But at your own discretion and responsibility.

🚀 In short: Use it, but don’t blame us! 😃

john-smilga/react-projects

React Projects

Corresponding Tutorial Topics

useState

Birthday Reminder

useEffect and Conditional Rendering

Tours
Reviews
Questions
Menu
Tabs
Slider

Forms

Lorem Ipsum Generator
Color Shades Generator
Grocery Bud

useRef

Navbar

useContext

Modal And Sidebar
Stripe Submenus

useReducer and useContext

Cart

React Router and useCallback

Cocktails

Advanced Projects (Course Exclusive)

My React Course

Markdown Preview
Random Person
Pagination
Stock Photos
Dark Mode
Movie DB
Hacker News
Quiz

FlutterFlow/flutterflow-documentation

Welcome to the FlutterFlow Documentation Repository!

We're thrilled to have you here! Our documentation is a crucial resource for both new and existing users of FlutterFlow, and it grows and improves with contributions from our community. Whether you're fixing a typo, or adding a new topic, your contributions help everyone.

Below you'll find guidelines on how you can contribute to different parts of the documentation.

A Little Note on Tooling

Most of our documentation is written in Markdown, making it super easy to edit files.
You can choose to edit Markdown directly in GitHub or open up the entire repository in StackBlitz.

Either way, you'll need to open up a pull request and get approval from at least one code owner.

Contribution Guidelines

Before you start contributing, please take a moment to review our Contribution Guidelines. This document outlines the process and expectations for contributions to ensure a smooth collaboration.

How to Contribute

Editing Existing Pages: To make edits to an existing page in docs.flutterflow.io, you can use the "Edit this page" button that appears at the bottom of each page. This button will bring you straight to the source of the page in GitHub.
Adding a New Docs Page: To add a new docs page, simply create a new Markdown page in an existing subdirectory within the /docs directory.
Create a PR to main: After making these changes, commit them to a new branch, and then create a pull request (PR) for review from FlutterFlow team.

Running the Docs Site Locally

You may want to run the docs site locally to test and visualize changes you are proposing to the documentation. To run the docs site locally, please enter the following commands in the terminal of the downloaded repository:

Install Dependencies: Run npm install in your terminal to install the necessary dependencies.
Preview Changes: To see your changes in real-time as you edit the files, you can run a local development server. This server will host your website and reflect the latest changes. Use the command npm run start.

Deploying a Staging Preview

To share your branch with reviewers before merging, deploy it to a Firebase Hosting preview channel. This builds the site and publishes it to a temporary URL (defaults to a 7-day expiry).

make staging                              # channel name = current git branch
make staging CHANNEL=my-channel           # custom channel name
make staging CHANNEL=my-channel EXPIRES=14d

Other targets:

make build — build the site only
make deploy-staging — deploy without rebuilding

Requires the Firebase CLI (npm install -g firebase-tools) and access to the flutterflow-docs-82026 Firebase project.

Ready to Contribute?

Your contributions are vital to keeping FlutterFlow's documentation clear, up-to-date, and helpful. We look forward to seeing your pull requests and are excited to welcome you into our community of contributors!

If you have any questions or need further guidance, don't hesitate to reach out to the documentation team. Happy documenting!

GitHub CSS Weekly Trending Repositories

HackTricks-wiki/hacktricks

HackTricks

Run HackTricks Locally

HackTricks Partners

HackTricks Friends

License & Disclaimer

Github Stats

References

SAPTARSHI-coder/EaseMotion-css

⚡ EaseMotion CSS

Table of Contents 📑

🚀 Quick Setup

Controlling looping animations

Support the Project

Project Statistics

Browser Compatibility

What is EaseMotion CSS?

Why it is easy to use

Why EaseMotion CSS?

Quick Start

Option 1 — CDN (fastest, zero setup, recommended)

Alternative CDN Providers

jsDelivr (recommended)

unpkg

GitHub Raw CDN

Option 2 — npm

Option 3 — Granular imports (pick only what you need)

Option 4 — Modular animation imports (load only what you need)

Full bundle

Framework Integration

React + Vite

1. Install EaseMotion CSS

2. Import in your entry file

3. Use classes directly in JSX

4. Use the <Animate> wrapper component (optional — in examples/react-vite/)

5. Run the showcase

Next.js

App Router (Next.js 13+)

Pages Router (Next.js 12 or earlier)

Vue / Svelte / Astro

Vue 3

Svelte / SvelteKit

Astro

SCSS Integration

Setup

Using the animate() mixin

Using the transition() mixin

Available SCSS Tokens

Available SCSS Mixins

Build your SCSS

Philosophy

Four principles that never get broken

How the curation pipeline works

Usage and Examples

Development

Duration Helpers

Scroll-Triggered Animations (Ease Reveal)

Hover Effects

Layout Utilities

Align Self Utilities

Available Classes

Hover Animation Examples

Buttons

Cards

Navigation

Build a Hero Section in 5 Lines

Customization

Override framework styles with @layer

FAQ

How does EaseMotion CSS differ from Tailwind?

Can I use it with React/Vue?

How do I submit a new component or utility?

Does it work without a build step?

File Structure

Roadmap

Contributing

✅ What contributors do

❌ What contributors do NOT do

The submission pipeline

4. Use the `<Animate>` wrapper component (optional — in `examples/react-vite/`)

Using the `animate()` mixin

Using the `transition()` mixin

Override framework styles with `@layer`

`Option 1: Release Archive Download`

`Option 2: Homebrew Fonts`

`Option 3: Unofficial Chocolatey or Scoop Repositories`

`Option 4: Arch Extra Repository`

`Option 5: PowerShell Installer`

`Option 6: Ad Hoc Curl Download`

`Option 7: Install Script`

`Option 8: Font Fallback`

`Option 9: Clone the Repo`

`Option 10: Patch Your Own Font`