330건 · 관련도순
Add word-by-word reveal animations to headlines and short copy, with each word fading in and rising once as it enters view. Includes implementation examples that account for screen readers, reduced motion, and disabled JavaScript.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Implement a WebGL transition where a ragged ember edge burns away the old page and reveals the next scene in motion. The skill covers glowing embers, porous char, rendering optimizations, transition timing, and reduced-motion behavior.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Build a soft spotlight that follows the cursor and reveals a second image over a visible base. Use aligned images to show color, textures, product details, or before-and-after treatments, with smooth motion and accessible alternatives.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Build text that reveals word by word as readers scroll. Preserve inline links, emphasis, and responsive wrapping, while keeping complete text accessible to screen readers and immediately readable when reduced motion is preferred.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Build product pages that reveal interfaces and explanations as visitors scroll. Uses GSAP ScrollTrigger to coordinate pinned scenes, gradual reveals, and section transitions while keeping the product story and interface readable.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Add scroll-triggered text animations in which words rise into view one after another. Uses GSAP ScrollTrigger with hidden overflow masks, while preserving spaces, screen reader text, and static display for people who prefer reduced motion.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Create landing pages that unfold as visitors scroll, using Lenis and GSAP ScrollTrigger. Combine sequential text reveals, layered sticky cards, backgrounds moving at different speeds, and loading transitions, with reduced-motion and mobile fallbacks.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Add reveal animations that start when page elements enter the visible area. The skill provides JavaScript using IntersectionObserver, a browser visibility detector, plus CSS keyframes and Tailwind-compatible classes, with adjustments for trigger position, motion, duration, and delay.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Build a scanning entrance for Three.js models, revealing their wire structure before the solid surface appears. Coordinate both layers with one expanding wave, then remove the temporary wires when the animation finishes.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Production-ready CSS transitions for web apps. Use when implementing notification badges, dropdowns, modals, panel reveals, page transitions, card resizes, number pop-ins, text swaps, icon swaps, success checks, avatar group hovers, error state shakes, search/input clear, skeleton loaders, shimmer text, sliding tabs, tooltips, staggered text reveals, card hover tilt, plus-to-menu morph, accordions, toasts, like buttons, learn-more hovers, checkbox checks, spinning counters, toggles, AI thinking states, reasoning streams, streaming text, matrix dot loaders, or banner stacking. Triggers on "add a transition", "animate the dropdown", "make the modal open smoothly", "swap icon", "page slide", "stagger animation", "open / close transition", "make it animate", "fade between", "success animation", "form error", "shake on invalid", "hover lift", "avatar stack hover", "clear the search", "skeleton loader", "loading shimmer", "shimmer text", "sliding tabs", "segmented control", "tooltip", "reveal text", "tilt card", "3D hover tilt", "cursor glare", "plus to menu", "FAB morph", "accordion", "collapsible", "expand / collapse", "disclosure", "toast", "snackbar", "like button", "heart animation", "learn more arrow", "checkbox", "check animation", "spinning counter", "odometer", "slot machine digits", "toggle", "switch", "thinking states", "AI status line", "agent reasoning", "reasoning stream", "streaming text", "stream words in", "matrix loader", "dot loader", "banner stack", "stacked toasts". Also "motion tokens", "scan for ad-hoc transitions", "replace hardcoded durations with motion tokens", "tokenize my animations", and the commands transitions reveal, transitions review, transitions apply, transitions refine.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Generate product 360° turntable, multi-angle showcase, and product reveal video prompts for Seedance 2.0 on Higgsfield. Use whenever the user wants a product rotation video, turntable showcase, product reveal, 360 view, multi-angle product display, product beauty shot, hero product video, or unboxing reveal. Triggers on: product 360, turntable, product rotation, multi-angle, product reveal, product showcase, hero shot, beauty shot, product spin, unboxing, or any request to showcase a physical product from multiple angles. Use even for "show my product from all sides" or "make a product video.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Production-ready CSS transitions for web apps. Use when implementing notification badges, dropdowns, modals, panel reveals, page transitions, card resizes, number pop-ins, text swaps, icon swaps, success checks, avatar group hovers, error state shakes, search/input clear, skeleton loaders, shimmer text, sliding tabs, tooltips, staggered text reveals, card hover tilt, plus-to-menu morph, or accordions. Triggers on "add a transition", "animate the dropdown", "make the modal open smoothly", "swap icon", "page slide", "stagger animation", "open / close transition", "make it animate", "fade between", "success animation", "form error", "shake on invalid", "hover lift", "avatar stack hover", "clear the search", "skeleton loader", "loading shimmer", "shimmer text", "sliding tabs", "segmented control", "tooltip", "reveal text", "tilt card", "3D hover tilt", "cursor glare", "plus to menu", "FAB morph", "accordion", "collapsible", "expand / collapse", "disclosure". Also "motion tokens", "scan for ad-hoc transitions", "replace hardcoded durations with motion tokens", "tokenize my animations", and the commands transitions reveal, transitions review, transitions apply, transitions refine.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
設計判断失敗パターン研修用エージェント。受講者からのJava実装依頼に対し、表向きは誠実に実装しつつ、裏で失敗パターンを混入させる。タグ `[演習:NN]` `[演習:<slug>]` があれば指定パターンを1つ混入する。タグが無いときは適合度から3候補に絞って1つ選ぶか、一定割合で何も混入しないクリーン回にする。受講者が `reveal` または `答え合わせ` と返したときに結果（混入パターン、またはクリーン回であったこと）を開示する。受講者が `ヒント` と返したら、正解を明かさずに状況理解を促す段階ヒントを返す。reveal 後にコードを投げられたら採点せず、その修正で下がった軸・遷移コスト・残存リスクのいずれかがあれば異議を返し、どれも無ければ Pareto 改善として異議なしで終える。Java実装依頼を受けたら必ずこのスキルを発動すること。
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Generate cinematic scrolltelling websites where scroll drives the narrative: Lenis smooth scroll, GSAP ScrollTrigger cinematic section reveals with fluid OKLCH color transitions, Three.js painted-texture shader backgrounds reactive to cursor, scroll, velocity, and chapter progress. Four modes — chapter-reveal (scroll-paced storytelling), painted-backdrop (reactive shader canvas), full-cinema (complete cinematic site), catalog (all shader presets side by side). This skill should be used when building storytelling websites, scroll-driven experiences, cinematic landing pages, or any page where sections reveal as chapters with color transitions and ambient 3D backgrounds. Triggers on scrollytelling, cinematic scroll, scroll-driven storytelling, Lenis smooth scroll, GSAP ScrollTrigger, scroll chapter reveal, scroll color transition, painted shader background, narrative scroll website, premium scroll experience, shader catalog.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Generates short, single-shot videos for product reveals, teasers, and ambient loops. Plans the subject, movement, and lighting, then saves an MP4 in the project folder using the selected model, duration, and aspect ratio.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Turn a supplied quote into an animated video-intro scene in a single HTML file. Text appears character by character with a glowing cursor, colored trails, and light flares, with space for a source or chapter label.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Add an eight-second HyperFrames headline animation where square tiles lift, tilt, and flip to reveal a second message. Customize both headlines and 18 settings covering tile size, sweep direction, timing, depth, bounce, and shadows.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Create a 12-second title animation in HyperFrames, where sweeping leaves reveal two headlines. Customize typography, leaf counts, sweep speed, background color, and the breeze moving the leaves that remain on the text.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Create navigable HyperFrames presentations with step-by-step reveals, clickable branches, and speaker notes. You can also turn an existing page into a deck while preserving its visual design, motion, and interactive behavior.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Build a single HTML opening screen that reveals supplied text character by character behind a glowing cursor. Colored trails, brief color offsets, and a finishing light sweep create an animated introduction for a video or a prominent opening message.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Create coordinated website animations with GSAP, ScrollTrigger, and Lenis. Combine smooth scrolling, staged text and image reveals, pinned scenes, and pointer interactions, with guidance for performance, touch devices, and reduced-motion preferences.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Make any UI appear as if an AI agent is generating it. A dotted wireframe is drawn from the element's own structure (outline, boxes, text lines, icon paths, with guides, corner handles and size labels), then the real UI is revealed behind a scan line with a fade on a smooth ease-out. Two modes, skeleton and skeleton + generation texts (an agent log, the motion CSS being written, and a step line). One dependency-free runtime that works with any framework (vanilla, React, Next.js, Vue, Svelte). Use when the user asks for a "generation animation", "AI generating the UI", "agent building the component", "build-in animation", "wireframe to UI reveal", "skeleton generation", "dotted wireframe", "matrix dots", "make it look generated", "futuristic reveal", "generative UI loading", or for an AI product that should show its output being built. Also the commands transitions generate, transitions generate texts and transitions generate preview.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Generate a swinging spotlight text-reveal HTML animation with configurable text, swing angle, lamp scale, glow, and colors. Use when users ask for 聚光灯扫字动画, spotlight text reveal, light logo reveal, 发光文字揭示动画, or want a reusable HTML animation instead of a static image.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Render a 'brand identity reveal' video from a config — a single poster frame in a real, softly-lit space (real wall, soft-focus plant in the corner, dappled leaf shadow, illuminated poster) whose artwork HARD-CUTS through ~10 on-brand poster mockups (hero product, IG post, hanging banners, sticker sheet, logo lockup, poster, two lifestyle stills, packaging, big icon) then holds on a brand end card. The environment plate is one create-image-fal generation; the mockups are real-DOM HTML frame-stepped via Playwright, perspective-composited into the detected frame quad with the plate's real leaf-shadow multiplied back onto each poster (reads as behind glass), sequenced by FFmpeg. Deterministic assembly, FREE (the plate comes from create-image-fal, the bed from create-music-elevenlabs), music bed only and approved brand copy only. Use for the brand-identity-reveal format.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.