Skip to content

Добавить мерцание фона hero-блока#151

Merged
ideav merged 4 commits intomainfrom
issue-150-b4ff2a6a0d8f
May 3, 2026
Merged

Добавить мерцание фона hero-блока#151
ideav merged 4 commits intomainfrom
issue-150-b4ff2a6a0d8f

Conversation

@konard
Copy link
Copy Markdown
Collaborator

@konard konard commented May 3, 2026

Root cause

PR #149 still made the automatic effect belong to the hero teaser pill: React scheduled data-shimmer, and CSS animated .hero-shimmer-badge::after. Issue #150 asks for the background to flicker instead; text can adjust for contrast, but the visible motion should be on the background.

Fix

  • Removed the timer-driven teaser shimmer state from Home.tsx.
  • Added a CSS-only hero-background-flicker layer over the existing hero image.
  • Made the background cycle smoothly through a light-blue / very-light-blue range over 9 seconds.
  • Kept the teaser hover behavior: hovering reveals the background and pauses the flicker while the text fades for contrast.
  • Updated the focused hero tests so they reject the old data-shimmer teaser behavior.

Reproduction and verification

Before the implementation, the focused hero tests failed because there was no background flicker layer and the teaser still owned data-shimmer.

Verified with:

node --test tests/hero-shimmer.test.mjs tests/hero-background.test.mjs
npm test
npm run build

Playwright verification:

  • Desktop render captured below at a visible flicker phase.
  • Mobile viewport confirmed hero-background-flicker is active with a 9s animation and no horizontal overflow.

Screenshot

Hero background flicker after

Fixes #150

Adding .gitkeep for PR creation (default mode).
This file will be removed when the task is complete.

Issue: #150
@konard konard self-assigned this May 3, 2026
@konard konard changed the title [WIP] https://github.com/ideav/backlogram/issues/148 Фон должен мерцать! Текст тоже можно регулировать для контраста, но мерцает фон. Плавно, ненавязчиво, но заметно.. Добавить мерцание фона hero-блока May 3, 2026
@konard konard marked this pull request as ready for review May 3, 2026 18:21
@konard
Copy link
Copy Markdown
Collaborator Author

konard commented May 3, 2026

Working session summary

Implemented and pushed the fix to PR 151: #151

Changed the hero effect so the background owns the slow light-blue flicker, and removed the old timer-driven teaser data-shimmer animation. Updated the focused hero tests and added the PR screenshot at docs/screenshots/issue150-hero-background-flicker-after.png.

Verification passed:

  • node --test tests/hero-shimmer.test.mjs tests/hero-background.test.mjs
  • npm test
  • npm run build
  • Playwright desktop/mobile render check

PR 151 is marked ready for review. GitHub reports no checks configured for this branch, and the local worktree is clean.


This summary was automatically extracted from the AI working session output.

@konard
Copy link
Copy Markdown
Collaborator Author

konard commented May 3, 2026

🤖 Solution Draft Log

This log file contains the complete execution trace of the AI solution draft process.

💰 Cost estimation:

  • Model: GPT-5.5
  • Provider: OpenAI
  • Public pricing estimate: $9.650461

📊 Context and tokens usage:

  • 208.8K / 1.1M (20%) input tokens, 29.6K / 128K (23%) output tokens

Total: (208.8K + 6.2M cached) input tokens, 29.6K output tokens, $9.650461 cost

🤖 Models used:

  • Tool: OpenAI Codex
  • Requested: gpt-5.5
  • Model: GPT-5.5 (gpt-5.5)

📎 Log file uploaded as Repository (39469KB)


Now working session is ended, feel free to review and add any feedback on the solution draft.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

2 participants