diff --git a/src/index.ts b/src/index.ts
index 11b4a8f..f33e8bc 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -49,3 +49,4 @@ export { MicrosdCardElement } from './microsd-card-element';
export { DipSwitch8Element } from './dip-switch-8-element';
export { StepperMotorElement } from './stepper-motor-element';
export { HX711Element } from './hx711-element';
+export { PcFanElement } from './pc-fan-element';
diff --git a/src/pc-fan-element.stories.ts b/src/pc-fan-element.stories.ts
new file mode 100644
index 0000000..7935cc3
--- /dev/null
+++ b/src/pc-fan-element.stories.ts
@@ -0,0 +1,40 @@
+import { html } from 'lit';
+import { forceReRender } from '@storybook/web-components';
+import './pc-fan-element';
+
+class FanAnimation {
+ angle = 0;
+
+ step() {
+ this.angle = this.angle + 5;
+
+ if (this.angle >= 360) {
+ this.angle = 0;
+ }
+ }
+}
+
+const fanAnimation = new FanAnimation();
+setInterval(() => {
+ fanAnimation.step();
+ forceReRender();
+}, 10);
+
+export default {
+ title: 'PC Fan',
+ component: 'wokwi-pc-fan',
+ argTypes: {
+ angle: { control: { type: 'number', min: 0, max: 360, step: 1 } },
+ },
+ args: {
+ angle: 0,
+ },
+};
+
+const Template = ({ angle }) => html``;
+export const Default = Template.bind({});
+Default.args = { angle: 5 };
+
+const TemplateOn = () => html``;
+export const FanOn = TemplateOn.bind({});
+FanOn.args = { angle: 0 };
diff --git a/src/pc-fan-element.ts b/src/pc-fan-element.ts
new file mode 100644
index 0000000..fa49b8e
--- /dev/null
+++ b/src/pc-fan-element.ts
@@ -0,0 +1,57 @@
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ElementPin } from '.';
+
+@customElement('wokwi-pc-fan')
+export class PCFanElement extends LitElement {
+ /**
+ * The angle of the fan blades
+ */
+ @property() angle = 0;
+
+ readonly pinInfo: ElementPin[] = [
+ { name: 'VCC', x: 6, y: 152, signals: [{ type: 'power', signal: 'VCC' }] },
+ { name: 'GND', x: 6, y: 160, signals: [{ type: 'power', signal: 'GND' }] },
+ { name: 'PWM', x: 6, y: 169, signals: [{ type: 'pwm' }] },
+ ];
+
+ render() {
+ /* eslint-disable prettier/prettier */
+ return html`
+
+
+ `;
+ }
+}
diff --git a/src/react-types.ts b/src/react-types.ts
index d01088b..8c0658c 100644
--- a/src/react-types.ts
+++ b/src/react-types.ts
@@ -48,6 +48,7 @@ import { MicrosdCardElement } from './microsd-card-element';
import { DipSwitch8Element } from './dip-switch-8-element';
import { StepperMotorElement } from './stepper-motor-element';
import { HX711Element } from './hx711-element';
+import { PCFanElement } from './pc-fan-element';
type WokwiElement = Partial & React.ClassAttributes;
@@ -101,6 +102,7 @@ declare global {
'wokwi-dip-switch-8': WokwiElement;
'wokwi-stepper-motor': WokwiElement;
'wokwi-hx711': WokwiElement;
+ 'wokwi-pc-fan': WokwiElement;
}
}
}