Add scramble-button component with GSAP registerEffect#74
Open
Add scramble-button component with GSAP registerEffect#74
Conversation
Introduces the first GSAP-powered component using the registerEffect pattern. The scramble effect (lib/gsap/effects/scramble.ts) animates text by cycling random characters and progressively revealing the final text left-to-right. The ScrambleButton component triggers this effect on hover, with a `scramble` prop for programmatic control on touch devices. Demo includes a Switch fallback visible on mobile. - Add gsap and @gsap/react dependencies - Add lib/gsap/effects/scramble.ts (registered GSAP effect) - Add registry/joyco/blocks/scramble-button.tsx (component) - Add demos/scramble-button-demo.tsx (with mobile switch fallback) - Add content/components/scramble-button.mdx (documentation) - Add components/ui/switch.tsx (shadcn switch for demo) - Update registry.json and meta.json https://claude.ai/code/session_01HMNgAqrU1XBYUoQBvrWuoW
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Major changes: - Split scramble into standalone registry item (`@joyco/scramble`) and scramble-button that references it via registryDependencies - Add "Effects" sidebar category alongside UI and Games, using `type: effect` frontmatter (same pattern as games) - Rewrite scramble effect with per-character jittered resolve timing, weighted character sets (underscores for visual breathing room), and auto-scaling duration (~50ms/char) - Fix demo: monospace font, uppercase text, overflow-hidden container, proper button sizing — eliminates layout shift during animation - Add revealDelay and scrambleFrames config for fine-tuning Files changed: - source.config.ts: add 'effect' to type enum - lib/source.ts: add getEffectSlugs() - layout.tsx → sidebar/index.tsx → sidebar/section.tsx: pipe effectSlugs through to render Effects subsection with TextScan icon - registry.json: scramble as standalone item, scramble-button references it - content/components/scramble.mdx: standalone effect documentation - content/components/scramble-button.mdx: updated to reference effect https://claude.ai/code/session_01HMNgAqrU1XBYUoQBvrWuoW
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Introduces the first GSAP-powered component using the registerEffect
pattern. The scramble effect (lib/gsap/effects/scramble.ts) animates
text by cycling random characters and progressively revealing the
final text left-to-right. The ScrambleButton component triggers this
effect on hover, with a
scrambleprop for programmatic control ontouch devices. Demo includes a Switch fallback visible on mobile.
https://claude.ai/code/session_01HMNgAqrU1XBYUoQBvrWuoW
Greptile Overview
Greptile Summary
Introduces a new GSAP-powered scramble effect and button component with comprehensive documentation and proper registry integration. The scramble effect animates text with random character cycling and staggered left-to-right reveal. The implementation includes mobile-friendly programmatic control via a
scrambleprop and follows established architectural patterns for effects categorization.Key Changes:
lib/gsap/effects/scramble.tswith character-by-character reveal animationScrambleButtoncomponent with hover and programmatic trigger supportIssues Found:
radix-uiinstead of@radix-ui/react-switch, causing runtime errorsConfidence Score: 3/5
radix-uiinstead of@radix-ui/react-switch, which will cause the demo to crash at runtime. All other changes follow proper patterns and integrate well with the codebase architecture.components/ui/switch.tsx- incorrect import will cause runtime errorImportant Files Changed
@gsap/reactdependencies; added unnecessaryradix-uimeta-package dependency