Air Conditioner

中文文档 | English Docs

Cloud air conditioner. Portable air conditioner. Invite a cool breeze into your summer life!

History: 云空调，便携小空调｜云游君的小站

• Machine Only[main]：ac.yunyoujun.cn
• Spare Machine[main]：ac.yyj.moe
• Sample Room：https://www.yunyoujun.cn/air-conditioner-room/

Features

Advantages

• 🕐 Turn on the air conditioner any time and anywhere
• 📱 Portable
• 🔋 Low power consumption（Drawn with HTML CSS instead of Canvas）
• 🔊 Noise is negligible
• 🎮 Easy to use
• 🔧 Swift installation

Limitations

• 💨 Wind not included

Installation

npm (recommended)

For projects with a build tool, install the package to manage versions and the widget lifecycle:

npm install @yunlefun-home/air-conditioner-widget

import { cdnAssets, mountAirConditioner } from '@yunlefun-home/air-conditioner-widget'

// Run on the client after the DOM is ready; call widget.remove() on unmount.
const widget = mountAirConditioner(document.body, {
  ...cdnAssets,
  placement: 'top-right',
  enableAudio: false,
})

cdnAssets pins fonts, audio and the logo to your installed package version. You can also self-host the included assets. ESM, CommonJS and TypeScript are supported without React or Vue.

Script (no build required)

Add this script to your site's shared header or footer:

<script defer src="https://cdn.jsdelivr.net/npm/@yunlefun-home/[email protected]/dist/embed/embed.js" data-placement="top-right"></script>

The unit sits in the top corner with a collapsible remote below. Use touch, click, or the keyboard to open it, and Escape to close it. Set data-placement="top-left" for the left corner or data-audio="true" to enable audio. Fonts and audio load alongside the script; no npm package is required.

The installation demo provides a version-pinned jsDelivr snippet. For self-hosting, pinning a version, and SPA integration, see the installation guide.

iframe

<iframe height="740" src="https://ac.yunyoujun.cn"></iframe>

Quickly install an air conditioner on your website.

Sample Room：AC Room

Home Installation Service

• Hugo: https://github.com/kuole-o/Hugo-air-conditioner

Deploy It Yourself

Vercel

Import the repository with the default Root Directory. vercel.json sets the site build command to pnpm run react:build, the output directory to packages/react/dist, and an SPA fallback for pages such as /rc. The root pnpm build command builds component libraries and is not the site build command.

Docker

You can use the following environment variables to customize the configuration.

• AC_NGINX_DOMAIN Set domain name
• AC_NGINX_PORT Set listening port

Tencent CloudBase

Developed and deployed based on Tencent's open source project CloudBase Framework. One-click deploying is supported.

Dev

# yarn dev
yarn start
# http://localhost:3000/

yarn build
# ./build

Environment Variables

cp .env.example .env

# Disable Advertisement
VITE_DISABLE_ADSENSE=true

Todo

• Air Conditioner
  • Energy Label
  • Temperature Range（16-31˚C）
  • Wind css
  • Sound Effects
    • Buttons
    • Running sound
• Follow system color schemes

Ref

• Numbers font: Digital 7，Free for personal use
• Working sounds of the AC: Air Extractor Fan | freesound

Sponsors