me/pi-ku
1
0
Fork 0
mirror of https://github.com/ramvignesh-b/pi-ku.git synced 2026-05-04 08:56:52 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: add candle to ignite envelope

Browse Source
This commit is contained in:
ramvignesh-b
2026-04-28 23:09:25 +05:30
parent faee0b45d6
commit 35e8d6761e
2 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/assets/envelope/candle.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

frontend/src/components/reader/EnvelopeReveal.tsx
+15 -9
View File
@@ -1,5 +1,6 @@
import { WavesIcon } from "@phosphor-icons/react"; import { WavesIcon } from "@phosphor-icons/react";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import candle from "../../assets/envelope/candle.png";
import stamp from "../../assets/envelope/stamp.png"; import stamp from "../../assets/envelope/stamp.png";
import waxSeal from "../../assets/envelope/waxSeal.png"; import waxSeal from "../../assets/envelope/waxSeal.png";
@@ -133,15 +134,20 @@ export function EnvelopeReveal({
</button> </button>
</div> </div>
{ignite && ( {ignite && (
<div className="absolute w-115 h-70 z-100 overflow-hidden flex align-baseline -translate-y-70 -translate-x-5"> <>
<div <div className="absolute w-115 h-70 z-100 overflow-hidden flex align-baseline -translate-y-70 -translate-x-5">
className="absolute z-1000 border-2 border-amber-200 -bottom-3 -right-3 w-0 h-0 transition-all duration-500 bg-base-100 rounded-tl-full rounded-bl-full origin-bottom-right" <div
style={{ className="absolute z-1000 border-2 border-amber-200 -bottom-3 -right-3 w-0 h-0 transition-all duration-500 bg-base-100 rounded-tl-full rounded-bl-full origin-bottom-right"
width: 2 * burn.width, style={{
height: 2 * burn.height, width: 2 * burn.width,
}} height: 2 * burn.height,
></div> }}
</div> ></div>
</div>
<div className="absolute z-1001 bottom-0 right-0 translate-x-15 translate-y-20">
<img src={candle} alt="candle" />
</div>
</>
)} )}
</> </>
); );